復選框（全選/全不選/反選）
阿新 • • 發佈：2019-03-25
所有 list inpu 更新 添加 als type itl NPU
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <style> ul, li { list-style: none; } </style> </head> <body> <div id="mydiv"> <input id="button1" type="button" value="批量查崗" /> <div id="i1"> <ul id="list"> <li id="l1" class="l11" data-proCode="208" data-hostNum="1">選項一</li> <li id="l2" class="l12" data-proCode="209" data-hostNum="2">>選項二</li> <li id="l3" class="l13" data-proCode="210" data-hostNum="3">>選項三</li> </ul> </div> </div> <script> $(document).on('click', '#button1', function () { // 創建一個標簽，將標簽添加到指定標簽裏面 var tag1 = '<input type="checkbox" name="item" />'; $("#list li").each(function () { $(this).prepend(tag1); }); $("#button1").remove(); var tag2 = '<input type="checkbox" id="all"><input type="button" value="全選" class="btn" id="selectAll"><input type="button" value="全不選" class="btn" id="unSelect"><input type="button" value="反選" class="btn" id="reverse"><input type="button" value="獲得選中的所有值" class="btn" id="getValue">'; $('#mydiv').prepend(tag2); }); </script> <!-- 多選框的全選和全不選 --> <script> $(function () { //全選或全不選 $(document).on("click", "#all", function () { //$(document).on('click', '#all', function () {})；這種選擇器能獲取動態加載的html屬性 if (this.checked) { $("#list :checkbox").prop("checked", true); } else { $("#list :checkbox").prop("checked", false); } }); //全選 var isCheckAll = $(document).on("click", "#selectAll", function () { $("#list :checkbox,#all").prop("checked", true); }); //全不選 $(document).on("click", "#unSelect", function () { $("#list :checkbox,#all").prop("checked", false); }); //反選 $(document).on("click", "#reverse", function () { $("#list :checkbox").each(function () { $(this).prop("checked", !$(this).prop("checked")); }); allchk(); }); //設置全選復選框,根據復選個數更新全選框狀態 $(document).on("click", "#list :checkbox", function () { allchk(); }); //獲取選中選項的值 $(document).on("click", "#getValue", function () { //alert(1); var valArr = new Array; $("#list :checkbox:checked").each(function (i) { valArr[i] = $(this).parent("li").attr("data-proCode"); }); var vals = valArr.join(','); alert(vals); }); }); function allchk() { var chknum = $("#list :checkbox").length; //選項總個數 var chk = 0; $("#list :checkbox").each(function () { if ($(this).prop("checked") == true) { chk++; } }); if (chknum == chk) { //全選 $("#all").prop("checked", true); } else { //不全選 $("#all").prop("checked", false); } } </script> </body> </html>
復選框（全選/全不選/反選）