写了个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:
咱们才能把选中的按钮变为未选中的状态呢?
可以用jquery方便简单,减少代码
一周热门 更多>