使用 JavaScript 选中/取消选中复选框

Question

如何使用 JavaScript 选中/取消选中复选框？

Answer 1

Javascript：

// Check
document.getElementById("checkbox").checked = true;

// Uncheck
document.getElementById("checkbox").checked = false;

jQuery (1.6+):

// Check
$("#checkbox").prop("checked", true);

// Uncheck
$("#checkbox").prop("checked", false);

jQuery (1.5-):

// Check
$("#checkbox").attr("checked", true);

// Uncheck
$("#checkbox").attr("checked", false);

Answer 2

尚未提及的重要行为：

以编程方式设置选中的属性，不会触发复选框的change事件。

在这个小提琴中自己看看：
http://jsfiddle.net/fjaeger/L9z9t04p/4/

（小提琴在 Chrome 46、Firefox 41 和 IE 11 中测试）

click()方法

有一天，您可能会发现自己在编写代码，这依赖于被触发的事件。 要确保事件触发，请调用复选框元素的click()方法，如下所示：

document.getElementById('checkbox').click();

但是，这会切换复选框的选中状态，而不是专门将其设置为true或false 。 请记住，当Checked属性实际更改时， change事件应仅启动。

它也适用于 jQuery 方式：使用prop或attr设置属性，不会触发change事件。

设置checked为特定值

您可以在调用click()方法之前测试checked的属性。 例子：

function toggle(checked) {
  var elm = document.getElementById('checkbox');
  if (checked != elm.checked) {
    elm.click();
  }
}

在此处阅读有关单击方法的更多信息：
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/click

Answer 3

去检查：

document.getElementById("id-of-checkbox").checked = true;

Answer 4

我们可以检查一个特定的复选框，

$('id of the checkbox')[0].checked = true

并取消选中，

$('id of the checkbox')[0].checked = false

Answer 5

试试这个：

//Check
document.getElementById('checkbox').setAttribute('checked', 'checked');

//UnCheck
document.getElementById('chk').removeAttribute('checked');

Answer 6

我想指出，将 'checked' 属性设置为非空字符串会导致选中框。

因此，如果您将 'checked' 属性设置为"false"<\/em><\/strong> ，复选框将被选中。 我必须将该值设置为空字符串、 null<\/em><\/strong>或布尔值false<\/em><\/strong> ，以确保未选中复选框。

Answer 7

function setCheckboxValue(checkbox,value) {
    if (checkbox.checked!=value)
        checkbox.click();
}

Answer 8

<script type="text/javascript">
    $(document).ready(function () {
        $('.selecctall').click(function (event) {
            if (this.checked) {
                $('.checkbox1').each(function () {
                    this.checked = true;
                });
            } else {
                $('.checkbox1').each(function () {
                    this.checked = false;
                });
            }
        });

    });

</script>

Answer 9

对于单次检查尝试

多次尝试

Answer 10

如果出于某种原因，您不想（或不能）在复选框元素上运行.click()<\/code><\/a> ，您可以直接通过其 .checked 属性（ <input type="checkbox"><\/code><\/a>的IDL 属性）<\/a>直接更改其值<input type="checkbox"><\/code><\/a> ）。

请注意<\/strong>，这样做不会触发通常相关的事件 ( change<\/a> )，因此您需要手动触发它以获得可与任何相关事件处理程序一起使用的完整解决方案。

这是原始 javascript (ES6) 中的一个功能示例：

如果您运行它并单击复选框和按钮，您应该会了解它是如何工作的。

请注意，我使用 document.querySelector 是为了简洁 \/没有费心在按钮上设置一个 id 并给复选框一个 aria-labelledby，如果使用这种方法应该这样做）或任何数量的其他方法来扩展它。 最后两个addEventListener<\/code>只是为了演示它是如何工作的。

Answer 11

使用香草js：

//for one element: 
document.querySelector('.myCheckBox').checked = true  //will select the first matched element
document.querySelector('.myCheckBox').checked = false//will unselect the first matched element

//for multiple elements:
for (const checkbox of document.querySelectorAll('.myCheckBox')) {
//iterating over all matched elements

checkbox.checked = true //for selection
checkbox.checked = false //for unselection
}

Answer 12

我同意当前的答案，但在我的情况下它不起作用，我希望这段代码将来能对某人有所帮助：

// check
$('#checkbox_id').click()

Answer 13

如果要使用TypeScript，可以这样做：

 function defaultCheckedFirst(checkGroup: any): void { for (let i = 0; i < checkGroup.length; i++) { (<HTMLInputElement>radionGroups[i]).checked = (i === 0 ? true : false); } } 

Answer 14

vanilla (PHP) 将打开和关闭复选框并存储结果。

<?php
    if($serverVariable=="checked") 
        $checked = "checked";
    else
        $checked = "";
?>
<input type="checkbox"  name="deadline" value="yes" <?= $checked 
?> >

# on server
<?php
        if(isset($_POST['deadline']) and
             $_POST['deadline']=='yes')
             $serverVariable = checked;    
        else
             $serverVariable = "";  
?>