Javascript jQuery在复选框上切换checked属性

我想用以下代码选中或取消选中buttonstyled复选框：

<ul id="ids_ul" class="nav nav-list">
    <li>
        <div class="btn-group-toggle" data-toggle="buttons">
            <label class="btn btn-info group_toggle" id="id_label1" for="id_checkboxes1">
            <input type="checkbox" value="1" id="id_checkboxes1" name="ids[]" autocomplete="off"/> One</label>
        </div>
    </li>
    <li>
        <div class="btn-group-toggle" data-toggle="buttons">
            <label class="btn btn-success group_toggle" id="id_label2" for="id_checkboxes2">
            <input type="checkbox" value="2" id="id_checkboxes2" name="ids[]" autocomplete="off"/> Two</label>
        </div>
    </li>
    <li>
        <div class="btn-group-toggle" data-toggle="buttons">
            <label class="btn btn-info group_toggle" id="id_label3" for="id_checkboxes3">
            <input type="checkbox" value="3" id="id_checkboxes3" name="ids[]" autocomplete="off"/> Three</label>
        </div>
    </li>
</ul>

let checkbox_state = "";
$(".group_toggle").click(function(){
    $(this).toggleClass("btn-info btn-success");
    checkbox_state = $(this).children("input:first");

    console.log("Initial checkbox_state: " + checkbox_state.prop("checked"));
    if($(checkbox_state).prop("checked") == true) {
        $(checkbox_state).prop("checked", false);
        console.log("Checked after click: " + checkbox_state.prop("checked"));
    } else {
        $(checkbox_state).prop("checked", true);
        console.log("Checked after click: " + checkbox_state.prop("checked"));
    }
});

在第三次单击时，取消选中按钮起作用，但button类现在正好相反。 如果我单击

One

或

Three

以选中复选框，则在第一次尝试时它会起作用

有人知道这里发生了什么吗

---

是否有更优雅的方法来验证复选框属性

checked

另外，

checkbox\u state

对于元素来说似乎是一个令人困惑的名称，因为它实际上存储了复选框本身，并且您使用

prop（'checked'）

获取它的状态-我已经更新了它，并将其更改为在函数内部，因为您不需要全局定义它

$（'.group_toggle'）。单击（函数（e）{
e、 预防默认值（）；
$（this.toggleClass（'btn-info btn success'）；
让$checkbox=$（this.children（'input:first'）；
let checked=$checkbox.prop（'checked'）；
log（`Initial checkbox_state:${checked}`）；
//反转检查状态
$checkbox.prop（'checked'，！checked'）；
log（`Checked after click:${$checkbox.prop（`Checked'）}`）；
});



一个


两个


三

对@Light的答案进行一些扩展

我看到的问题是事件发生的顺序，您试图手动控制复选框的状态。当您使用标签包装复选框（或使用标签上的for=“#id”）时，每当单击标签时，它都会委托对复选框进行单击（这就是为什么会触发两次）。另一件事是按钮的初始状态不正确，按钮2具有btn success类，但未处于活动状态，并且未选中相关复选框。请参阅下面的完整解决方案


让复选框_state=”“；
$（“.group_toggle”）。单击（函数（e）{
e、 预防默认值（）；
$（this.toggleClass（“btn信息btn成功”）；
复选框_state=$（this）.children（“输入：第一”）；
log（“初始复选框_状态：”+复选框_状态.prop（“选中”）；
if（$（复选框状态）.prop（“选中”）==true）{
复选框_state.prop（'checked'，false）；
console.log（“单击后选中：”+复选框_state.prop（“选中”）；
}否则{
复选框_state.prop（'checked'，true）；
console.log（“单击后选中：”+复选框_state.prop（“选中”）；
}
});



一个


两个


三

请注意，如果它与引导相关，请确保它与引导相关，因为我在带有jQuery且没有引导库的代码段中复制了双击事件。可能是由于jQuery
数据切换属性
。我无法找出双重事件的原因。您可以将切换简化为
$checkbox.prop（'checked'，！checked）
。它将自动将其值设置为与当前值相反的值。没有
if…else
required。在代码片段中，它工作得很好，但对我来说不是。我想我覆盖了某个地方的属性，所以我必须搜索它。无论如何。感谢您的解决方案和@NathanMiller的简短代码。我将按照Nathan的建议进行更改-感谢您指出这一点；很高兴您找到了解决方案@GePu
Initial checkbox_state: true
Checked after click: false

Initial checkbox_state: true // why still true?
Checked after click: false

Initial checkbox_state: false
Checked after click: true

Initial checkbox_state: true
Checked after click: false