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

Question

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

- lisovaccaro

---

可能是与使用JavaScript修改复选框相似的问题。 - mauris

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);

- Alex Peattie

---

在本地托管的文件中，使用.prop似乎无法在Firefox和Jquery 1.11.2中正常工作。.attr可以使用。我还没有进行更全面的测试。以下是代码：personContent.find("[data-name='" + pass.name + "']").children('input').attr('checked', true); - Andrew Downes

我们应该更倾向于使用 attr 还是 prop？ - Black

似乎 .checked = true/false 不会触发 change 事件 :-\ - user1636522

刚测试了一下这个 onclick="document.getElementById('dmsmh_chk').checked = !document.getElementById('dmsmh_chk').checked;"，它的行为就像是在纯JS中使用jQuery的toggle方法。（当复选框未被选中时选中它，当复选框已被选中时取消选中） - Bim

对我不起作用 - Max

如果我正在使用"document.getElementsByClassName("chkbx")"，并且返回了多个复选框，那么怎么办？ - Mephisto

Answer 2

尚未提及的重要行为：

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

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

(在Chrome 46、Firefox 41和IE 11中测试过)

click()方法

有一天，您可能会编写依赖于事件被触发的代码。为了确保事件触发，请调用复选框元素的click()方法，像这样：

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

然而，这会切换复选框的选中状态，而不是将其明确设置为true或false。请记住，只有当选中属性实际更改时，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

- sudoqux

---

这是一个很好的答案，但是我个人更喜欢触发变化事件而不是调用 click()。可以这样写：elm.dispatchEvent(new Event('change')); - Victor Sharovatov

@VictorSharovatov 为什么你会选择触发更改事件？ - PeterCo

我只能部分同意 - 许多带有广告拦截功能的网络浏览器会通过防止虚拟点击（virtual clicking()）来保护DOM，以免受到广告的不必要的操作干扰。 - pkolawa

也许是因为它更清晰地表达了意图——点击元素来触发更改事件，而不是分派更改事件来触发更改事件——间接（点击触发更改）与直接。后一种方式更清晰，不需要读者知道点击会触发更改。 - Bill Dagg

Answer 3

需要检查的事项：

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

取消选择：

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

- topherg

---

那只会改变被选属性，但是不会触发onclick和类似的事件。 - Paul Stelian

Answer 4

我们可以这样勾选一个特定的复选框：

我们可以将一个特定的复选框选中，

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

并通过取消勾选来实现。

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

- AKS

---

如果你只选择一个元素，那么你真的不需要数组索引。但我猜如果你想明确一点也无妨。哈哈 - Rizowski

@Rizowski 你需要索引来获取原生的HTML元素 - jQuery对象没有“checked”属性。 - Henrik Christensen

这对我很有效。如果没有数组索引，我会得到未定义的错误。非常感谢，救了我的一天。 - Neri

完美运作！它只适用于[0]，因为对象没有该属性，所以我们需要索引。不知道为什么这个答案不是最受欢迎的答案... - rank

Answer 5

试试这个：

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

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

- Syed Jamil Uddin

---

你的答案有一个限制。当复选框被最终用户勾选或取消勾选至少一次时，即非通过编程方式，它就停止工作了，同一个复选框不能再通过设置此属性来进行编程式勾选或取消勾选。我刚在Mozilla Firefox 94.0.2和Microsoft Edge 96.0.1054.43下进行了测试。但是，document.getElementById('checkbox').checked = true和document.getElementById('checkbox').checked = false按预期工作（但不像许多帖子中所述那样触发更改事件）。 - gouessej

Answer 6

需要注意的是，将 'checked' 属性设置为非空字符串会导致复选框被选中。

因此，如果将 'checked' 属性设置为 "false"，则该复选框将被选中。为了确保复选框未被选中，我必须将值设置为空字符串、null 或布尔值false。

- Jan Rasehorn

---

这是因为非空字符串被视为“真值”。 - James Coyle

Answer 7

使用纯JavaScript：

//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
}

- vnapastiuk

Answer 8

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

- kandi

Answer 9

对于单个检查，尝试执行以下操作

myCheckBox.checked=1

<input type="checkbox" id="myCheckBox"> Call to her

多次尝试

document.querySelectorAll('.imChecked').forEach(c=> c.checked=1)

Buy wine: <input type="checkbox" class="imChecked"><br>
Play smooth-jazz music: <input type="checkbox"><br>
Shave: <input type="checkbox" class="imChecked"><br>

- Kamil Kiełczewski

Answer 10

<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>

- M.Owais