更改/获取CheckBox的选中状态

Question

我只想用 JavaScript 获取/更改 CheckBox 的值。并不是说我不能为此使用 jQuery。我已经尝试过类似的方法，但它不起作用。

JavaScript 函数

    function checkAddress()
    {
        if (checkAddress.checked == true)
        {
            alert("a");
        }
    }

HTML

<input type="checkbox" name="checkAddress" onchange="checkAddress()" />

Answer 1

使用

onclick

即可。理论上，它可能无法捕获通过键盘所做的更改，但所有浏览器在通过键盘检查时似乎都会触发该事件。

您还需要将复选框传递到函数中：

function checkAddress(checkbox)
{
    if (checkbox.checked)
    {
        alert("a");
    }
}

HTML

<input type="checkbox" name="checkAddress" onclick="checkAddress(this)" />

Answer 2

使用前需要先检索复选框。

为复选框指定

id

属性，以便使用

document.getElementById(..)

检索它，然后检查其当前状态。

例如：

function checkAddress()
{
    var chkBox = document.getElementById('checkAddress');
    if (chkBox.checked)
    {
        // ..
    }
}

您的 HTML 将如下所示：

<input type="checkbox" id="checkAddress" name="checkAddress" onclick="checkAddress()"/>

（还将

onchange

更改为

onclick

。在 IE 中效果不太好:)。

Answer 3

我知道这是一个很晚的回复，但这段代码更灵活，应该可以帮助像我这样的迟到者。

function copycheck(from,to) {
//retrives variables "from" (original checkbox/element) and "to" (target checkbox) you declare when you call the function on the HTML.

    if(document.getElementById(from).checked==true) 
    //checks status of "from" element. change to whatever validation you prefer.
        {
            document.getElementById(to).checked=true;
             //if validation returns true, checks target checkbox
        }
    else
        {   
            document.getElementById(to).checked=false; 
             //if validation returns true, unchecks target checkbox
        }
}

HTML 类似于

<input type="radio" name="bob" onclick="copycheck('from','to');" />

其中“from”和“to”是您希望复制“to”的元素“from”各自的ID。 事实上，它可以在复选框之间工作，但您可以输入您想要的任何 ID 和任何您想要的条件，只要在从 html 事件调用发送变量时正确定义“to”（要操作的复选框）即可。

注意，正如 SpYk3HH 所说，你要使用的目标默认是一个数组。使用 Web 开发人员工具栏中的“显示元素信息”工具将帮助您找到各个复选框的完整 ID。

希望这有帮助。

Answer 4

<input type="checkbox" name="checkAddress" onclick="if(this.checked){ alert('a'); }" />

Answer 5

你需要这个：

window.onload = function(){
    var elCheckBox=document.getElementById("cbxTodos");
    elCheckBox.onchange =function (){
        alert("como ves");
    }
};

Answer 6

需要：

if (document.forms[0].elements["checkAddress"].checked == true)

假设您有一个表单，否则使用表单名称。

顺便说一句，不要以相同的名称调用元素和函数，这可能会导致奇怪的冲突。

Answer 7

我知道这是迟到的信息，但在 jQuery 中，使用 .checked 是可能且简单的！ 如果你的元素是这样的：

<td>
    <input type="radio" name="bob" />
</td>

您可以轻松获取/设置选中状态：

$("td").each(function()
{
    $(this).click(function()
    {
        var thisInput  = $(this).find("input[type=radio]");
        var checked = thisInput.is(":checked");
        thisInput[0].checked = (checked) ?  false : true;
    }
});

秘密是使用“[0]”数组索引标识符，它是 jquery 对象的 ELEMENT！ 享受吧！

Answer 8

这是我如何使用这种东西的一个例子：

HTML：

<input type="checkbox" id="ThisIsTheId" value="X" onchange="ThisIsTheFunction(this.id,this.checked)">

JAVASCRIPT：

function ThisIsTheFunction(temp,temp2) {
  if(temp2 == true) {
    document.getElementById(temp).style.visibility = "visible";
  } else {
    document.getElementById(temp).style.visibility = "hidden";
  }
}

Answer 9

var val = $("#checkboxId").is(":checked");

Answer 10

这是一个带有示例的快速实现：

勾选所有项目的复选框：

<input id="btnSelectAll" type="checkbox">

单个项目（表格行）：

<input class="single-item" name="item[]" type="checkbox">

jQuery 的 Js 代码：

document.addEventListener('click', function(event) {
    if (event.target.id === 'btnSelectAll') {
        const isChecked = event.target.checked;
        const singleItems = document.querySelectorAll('.single-item');
        const batchErase = document.querySelector('.batch-erase');

        singleItems.forEach(item => {
            item.checked = isChecked;
        });

        if (isChecked) {
            batchErase.classList.add('d-block');
        } else {
            batchErase.classList.remove('d-block');
        }
    }
});

批量删除项目：

<div class="batch-erase d-none">
    <a href="/path/to/delete" class="btn btn-danger btn-sm">
        <i class="fe-trash"></i> Delete All
    </a>
</div>

Answer 11

这会有用的

$("input[type=checkbox]").change((e)=>{ 
  console.log(e.target.checked);
});