12月10, 2015

Bootstrap中checkbox全选、反选、全不选

在使用checkbox多选时可能会遇到全选、反选、全不选的操作,本文主要总结一下使用Bootstrap实现全选、反选、全不选功能的方法 :

1、Html代码

<script
  src="https://code.jquery.com/jquery-1.12.4.min.js"
  integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
  crossorigin="anonymous"></script>
<input type="button" value="全选" class="btn" id="selectAll">   
<input type="button" value="全不选" class="btn" id="unSelect">   
<input type="button" value="反选" class="btn" id="reverse"> 
<div id="boxlists">
    <lable style="vertical-align:middle">list1</lable>
    <input type="checkbox" name="listids" value="1"><br/>
    <lable style="vertical-align:middle">list2</lable>
    <input type="checkbox" name="listids" value="2"><br/>
    <lable style="vertical-align:middle">list3</lable>
    <input type="checkbox" name="listids" value="3"><br/>                 
</div>

2、JavaScript代码

$("#selectAll").click(function () { 
    $("#boxlists input:checkbox").each(function () {   
        $(this).prop('checked', true);
    }); 
}); 
$("#unSelect").click(function () {   
       $("#boxlists input:checkbox").removeAttr("checked");  
}); 
$("#reverse").click(function () {  
    $("#boxlists input:checkbox").each(function () {   
        this.checked = !this.checked;  
    }); 
});

以上就是Bootstrap中checkbox全选、反选、全不选功能的简单实现,有什么问题可以在文章下方留言。

本文链接:https://www.shaobin.wang/post/26.html

Comments