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

13 浏览
0 Comments

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

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

0

3 答案

0 Comments

Check/Uncheck checkbox with JavaScript问题的出现原因是直接改变checked属性只会改变checkbox的状态，而不会触发onclick等类似事件。

解决方法如下：

要选中checkbox：

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

要取消选中checkbox：

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

这样只会改变checked属性。但是，onclick等事件不会被触发。

0
0 Comments

问题的出现原因：使用JavaScript编程设置checkbox的checked属性时，不会触发change事件。

解决方法：调用checkbox元素的click()方法来确保触发change事件。但是需要注意的是，click()方法会切换checkbox的checked状态，而不是明确地将其设置为true或false。因此，在调用click()方法之前，可以先检查checked属性的值，然后再决定是否调用click()方法。

以下是一种示例代码：

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

另外，可以使用dispatchEvent方法来触发change事件，如下所示：

elm.dispatchEvent(new Event('change'));

以上是对于问题的出现原因和解决方法的整理。

0
0 Comments

JavaScript中的代码可以用来选中或取消选中复选框。具体的代码如下：

JavaScript：

// 选中

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

// 取消选中

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

jQuery (1.6+)：

// 选中

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

// 取消选中

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

jQuery (1.5-)：

// 选中

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

// 取消选中

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

然而，在Firefox浏览器中，使用jQuery 1.11.2版本的.prop方法似乎无法正常工作，而使用.attr方法可以正常工作。以下是测试代码：

personContent.find("[data-name='" + pass.name + "']").children('input').attr('checked', true);

那么我们应该使用.attr还是.prop呢？

显然，.checked = true/false不会触发change事件。 :-\

顺便说一句，我刚刚测试了这个代码：onclick="document.getElementById('dmsmh_chk').checked = !document.getElementById('dmsmh_chk').checked;"，它的行为就像是jQuery中的toggle方法一样。当复选框未选中时选中它，当复选框已选中时取消选中。

这对我不起作用。

如果我使用"document.getElementsByClassName("chkbx")"，并且返回多个复选框，会发生什么呢？

0