检查bootstrap中的复选框是否被选中

Question

我正在使用此处的检查列表组 - http://bootsnipp.com/snippets/featured/checked-list-group

我想检查哪个复选框被选中，我想通过单击按钮重置所有选中的项目。我想在 Javascript 中完成此操作。

我使用正常的 bootstrap 输入标签和 Javascript 成功地实现了这一点，但不知何故我无法在这段代码中做到这一点。

<ul id="check-list-box" class="list-group checked-list-box">
    <li class="list-group-item">Permutation</li>
    <li class="list-group-item">Combination</li>
    <li class="list-group-item">Probability</li>                                   
</ul>

 <button class="btn btn-primary" id="get-checked-data" onclick="myfunction()" >Get Checked Data</button>
 <button class="btn btn-primary" id="reset" name="reset_all" >Reset</button>

这是我用 javascript 写的：

function myfunction()
{

    if(document.getElementById('check-list-box').checked)
    {
        alert("hello-world");    
    }
    else
    {
        alert("not checked");
    }

}
//And something similar for resetting. But I am sure, I am missing something here

我们将不胜感激。

Answer 1

这是一个使用 bootstrap 的掩码 HTML，它看起来像一个复选框，但它不是一个复选框。所以你的代码永远不会工作。

你必须这样工作

if($(".checked-list-box li.list-group-item-primary.active").length > 0){
   alert("hello");
} else {
   alert("not checked");
}

我在上面的代码中写的是当你选中上面的复选框时 html li 添加了两个 class "list-group-item-primary active"

所以把那些 class 放在你的里会更好。这将告诉您复选框是否被选中。

检查bootstrap中的复选框是否被选中

Check whether checkbox is selected or not in bootstrap

javascript

jquery

twitter-bootstrap