bootstrap的checkbox如何恢复初始未选中状态 财富值76

2016-10-12 11:40发布

写了个demo,有四个checkbox,点击查看按钮后alert出被选中的按钮,然后怎么才能让checkbox恢复未选中状态呢?
html代码:

                <div class="btn-group" data-toggle="buttons">                     <label class="btn btn-primary">                         <input id="checkbox1" type="checkbox"  value="one">1                     </label>                     <label class="btn btn-primary">                         <input id="checkbox2" type="checkbox"  value="two">                         2                     </label>                     <br />                     <label class="btn btn-primary">                         <input id="checkbox3" type="checkbox" value="three">                         3                     </label>                     <label class="btn btn-primary">                         <input id="checkbox4" type="checkbox" value="four">                         4                     </label>                 </div>                 <input  type="button" onclick="checkbox()" value="查看"/>

script代码:

<script>     <!-- js监测checkbox是否被选中 -->     function checkbox()     {         var box1 = document.getElementById("checkbox1");         var box2 = document.getElementById("checkbox2");         var box3 = document.getElementById("checkbox3");         var box4 = document.getElementById("checkbox4");         if (box1.checked) {             alert(box1.value);         }         if (box2.checked) {             alert(box2.value);         }         if (box3.checked) {             alert(box3.value);         }         if (box4.checked) {             alert(box4.value);         }         //点击确认按钮后(或者点击下一页后)让所有按钮恢复初始状态      } </script> 

页面状态:

由于使用了bootstrap,点击按钮后,实际改变的是当前div的class:

咱们才能把选中的按钮变为未选中的状态呢?

友情提示: 此问题已得到解决,问题已经关闭,关闭后问题禁止继续编辑,回答。
该问题目前已经被作者或者管理员关闭, 无法添加新回复
5条回答

}
function change(obj){

}

原生的javascript有点麻烦,我用jquery实现了。既然checkbox选中状态为checkbox父元素添加了一个active class,那就判断checkbox父元素是否有active class。恢复checkbox选中状态就是删除所有checkbox父元素的active class。

for(var i=0;i<label.length;i++){

mishen - whatsns产品经理
5楼-- · 2016-10-12 11:28

可以用jquery方便简单,减少代码

一周热门 更多>