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

IT技术 javascript checkbox
2021-01-24 04:03:18

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

6个回答

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);
我们应该使用attr还是prop
2021-03-30 04:03:18
显然.checked = true/false不会触发change事件:-\
2021-04-02 04:03:18
仅供参考:刚刚测试了这个,onclick="document.getElementById('dmsmh_chk').checked = !document.getElementById('dmsmh_chk').checked;" 它的行为就像普通 JS 中的 jQuery 切换。(未选中时选中该框或选中时删除该复选框)
2021-04-03 04:03:18
在带有本地托管文件的 Firefox 中,使用 .prop 似乎不适用于 Jquery 1.11.2。.attr 确实如此。我没有更全面的测试。这是代码:``` personContent.find("[data-name='" + pass.name + "']").children('input').attr('checked', true); ``
2021-04-08 04:03:18

尚未提及的重要行为:

以编程方式设置checked属性,不会触发changecheckbox事件

在这个小提琴中亲眼看看:http :
//jsfiddle.net/fjaeger/L9z9t04p/4/

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

click()方法

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

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

但是,这会切换复选框的选中状态,而不是专门将其设置为truefalse请记住,该change事件只应在已检查的属性实际更改时触发。

它也适用于 jQuery 方式:使用propor设置属性attr不会触发change事件。

设置checked为特定值

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

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

这是一个很好的答案,但我个人更喜欢触发更改事件而不是调用 click() elm.dispatchEvent(new Event('change'));
2021-03-12 04:03:18
我只能部分同意 - 许多带有 AdBlocks 的 Web 浏览器都在保护 DOM 免受虚拟点击()的影响,因为广告中出现了不需要的操作
2021-03-13 04:03:18
@VictorSharovatov 为什么你更喜欢触发 change 事件?
2021-03-16 04:03:18
@PeterCo:可能是因为它更清楚地描绘了意图——单击元素以触发更改事件与调度更改事件以触发更改事件——间接(单击触发更改)与直接。后者更加清晰,不需要读者知道点击会触发更改。
2021-03-24 04:03:18

去检查:

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

取消选中:

document.getElementById("id-of-checkbox").checked = false;
那只会改变checked 属性。但是,不会触发 onclick 和类似事件。
2021-03-22 04:03:18

我们可以检查一个微粒复选框,

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

并取消选中,

$('id of the checkbox')[0].checked = false
工作完美!它只对 [0] 起作用,因为对象没有属性,所以我们需要索引。不知道为什么这个答案不是最受好评的答案......
2021-03-27 04:03:18
@Rizowski 您确实需要索引来获取本机 html 元素 - jQuery 对象没有“已检查”属性
2021-03-30 04:03:18
这对我有用。如果没有数组索引,我会收到未定义的错误。非常感谢,拯救了我的一天。
2021-04-05 04:03:18
如果你只选择一个元素,你真的不需要数组索引。但我想如果你想明确的话。哈哈
2021-04-06 04:03:18

试试这个:

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

//UnCheck
document.getElementById('chk').removeAttribute('checked');
您的回答有局限性。当最终用户至少选中或取消选中复选框一次时,即不是以编程方式,它停止工作,无法再通过设置此属性以编程方式选中或取消选中相同的复选框。我刚刚在 Mozilla Firefox 94.0.2 和 Microsoft Edge 96.0.1054.43 下进行了测试。但是, document.getElementById('checkbox').checked = true 和 document.getElementById('checkbox').checked = false 按预期工作(但不会触发许多帖子中所述的更改事件)。
2021-03-30 04:03:18