javascript - bootstrap的checkbox如何恢复初始未选中状态
本文介绍了javascript - bootstrap的checkbox如何恢复初始未选中状态的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
写了个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:
咱们才能把选中的按钮变为未选中的状态呢?
解决方案
<script>
<!-- js监测checkbox是否被选中 -->
function checkbox()
{
$("input[type='checkbox']").each(function(){
if($(this).is(":checked")){
alert($(this).val());
$(this).parent().removeClass('active');
}
});
}
</script>
可以用jquery方便简单,减少代码
这篇关于javascript - bootstrap的checkbox如何恢复初始未选中状态的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文