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

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

JavaScript:

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

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

jQuery（1.6+）：

jQuery（1.5-）：

检查：

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

要取消选中：

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

---

我们可以选中微粒复选框，如下所示：

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

取消选中

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

尚未提及的重要行为：

通过编程设置checked属性，不会触发复选框的

change

事件

亲自看看这把小提琴：

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

方法 有朝一日，您可能会发现自己正在编写代码，这取决于触发的事件。要确保触发事件，请调用checkbox元素的

click（）

方法，如下所示：

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

但是，这会切换复选框的选中状态，而不是专门将其设置为

true

或

false

。请记住，

change

事件只应在选中的属性实际更改时触发

它也适用于jQuery方式：使用

prop

或

attr

设置属性不会触发

change

事件

将选中的

设置为特定值
在调用
click（）
方法之前，可以测试
checked
属性。例如：

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

在此处阅读有关单击方法的更多信息：

我想指出，将“checked”属性设置为非空字符串会导致出现复选框

因此，如果将“checked”属性设置为“false”，复选框将被选中。我必须将值设置为空字符串null或布尔值false，以确保复选框未被选中。

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

$（文档）.ready（函数（）{
$（'.selectall'）。单击（函数（事件）{
如果（选中此项）{
$（'.checkbox1'）。每个（函数（）{
this.checked=true；
});
}否则{
$（'.checkbox1'）。每个（函数（）{
此项检查=错误；
});
}
});
});
试试这个：

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

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

如果出于某种原因，您不想（或不能）在checkbox元素上运行，只需通过其.checked属性（of）直接更改其值即可

注意这样做不会触发正常相关的事件（），因此您需要手动触发它，以获得一个与任何相关事件处理程序一起工作的完整解决方案

以下是原始javascript（ES6）中的一个函数示例：


class臀部{
构造函数（）{
设ourCheckBox=null；
this.ourCheckBox=document.querySelector（“#checkboxID”）；
让checkBoxButton=null；
this.checkBoxButton=document.querySelector（“#checkboxID+按钮[aria label=“checkboxID”]”）；
让checkEvent=新事件（“更改”）；
this.checkBoxButton.addEventListener（'click'，function（）{
让checkBox=this.ourCheckBox；
//切换复选框：反转其状态！
checkBox.checked=！checkBox.checked；
//让其他人知道复选框已更改
checkBox.dispatchEvent（checkEvent）；
}.约束（这个），真实）；
this.eventHandler=函数（e）{
document.querySelector（'.checkboxfeedback'）.insertAdjacentHTML（'beforeend'，'
事件发生在checkbox上！键入：'+e.Type+'复选框状态现在：'+this.ourCheckBox.checked）；
}
//演示：无论是单击复选框还是按钮，我们都将看到更改事件
this.ourCheckBox.addEventListener（'change'，函数（e）{
这个.eventHandler（e）；
}.约束（这个），真实）；
//演示：如果我们仅将单击处理程序绑定到复选框，则只会看到来自复选框的单击
this.ourCheckBox.addEventListener（'click'，函数（e）{
这个.eventHandler（e）；
}.约束（这个），真实）；
}
}
var init=函数（）{
const checkIt=新臀部（）；
}
如果（document.readyState！=“正在加载”）{
初始化；
}否则{
document.addEventListener（'DOMContentLoaded'，init）；
}

更改复选框！
还没有变化用于单次检查尝试


myCheckBox.checked=1
打电话给她
我同意目前的答案，但在我的情况下，它不起作用，我希望这段代码将来能帮助别人：

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

香草（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 = "";  
?>


在Firefox中使用.prop的可能重复项似乎不适用于本地托管文件的Jquery 1.11.2。是的。我还没有完全测试过。代码如下：``personContent.find（“[data name=”+pass.name+“]”）.children（'input'）.attr（'checked'，true））```我们应该使用
attr
还是
prop
？显然
.checked=true/false
不会触发
change
事件：-\n你是对的。这完全是我的错。很抱歉，如果您只选择一个元素，那么您确实不需要数组索引。但我想如果你想说得清楚的话。haha@Rizowski您确实需要索引来获取本机html元素-jQuery对象没有“已检查”属性这对我来说很有效。没有数组索引，我得到了未定义的错误。非常感谢，这挽救了我的一天。这是因为非空字符串被视为truthy。这是一个很好的答案，但就我个人而言，我更愿意触发更改事件，而不是调用click（）
elm.dispatchEvent（new event（'change'）
@VictorSharovatov为什么您更愿意触发更改事件？我只能部分同意-许多带有AdBlock的web浏览器都在保护DOM不受虚拟单击的影响（）由于来自ads@PeterCo：可能是因为它更清楚地描述了意图--单击元素触发更改事件与分派更改事件触发更改事件--间接（单击触发更改）与直接。后者相当清晰，不需要读者知道
function setCheckboxValue(checkbox,value) {
    if (checkbox.checked!=value)
        checkbox.click();
}

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

<?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 = "";  
?>