jQuery 頁面中復選框全選、反選、下拉聯動(級聯)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="./dist/css/bootstrap.min.css"> <link rel="stylesheet" href="./dist/css/zTreeStyle.css"> <title>Document</title> </head> <body> <div class="container"> <div class="row"> <div class="col-md-12"> <p class="text-center" style="background:rgba(0, 0, 0, .075);"> <span style="background:lightcyan;">< <span style="color:darkblue;">三級聯動菜單</span>></span> </p> </div> <div class="col-md-4"> <label for="One">一級菜單</label> <select name="default1" id="input${1/(\w+)/\u\1/g}" class="form-control"> <option value="default">-- Select One --</option> </select> </div> <div class="col-md-4"> <label for="Two">二級菜單</label> <select name="default2" id="input${1/(\w+)/\u\1/g}" class="form-control"> <option value="default">-- Select One --</option> </select> </div> <div class="col-md-4"> <label for="Three">三級菜單</label> <select name="default3" id="input${1/(\w+)/\u\1/g}" class="form-control"> <option value="default">-- Select One --</option> </select> </div> </div> <div class="row"> <div class="col-md-2"> <div class="row"> <div class="col-md-4"> <input type="checkbox" name="getAll" id="getAll" value="全選" /> <br> 全選 <input type="checkbox" name="fsAll" id="fsAll" value="反選" /> <br> 反選 <input class="btn btn-primary" type="button" name="addCks" id="addCks" value="添加"> <input name="rem" id="rem" type="button" class="btn btn-danger" value="清空" /> </div> <div class="col-md-6 chekboxContent"> <input type="checkbox" name="ck" value="1"> <input type="checkbox" name="ck" value="2"> <input type="checkbox" name="ck" value="3"> <input type="checkbox" name="ck" value="4"> <input type="checkbox" name="ck" value="5"> <input type="checkbox" name="ck" value="6"> <input type="checkbox" name="ck" value="7"> <input type="checkbox" name="ck" value="8"> <input type="checkbox" name="ck" value="9"> <input type="checkbox" name="ck" value="10"> <input type="checkbox" name="ck" value="11"> <input type="checkbox" name="ck" value="12"> <input type="checkbox" name="ck" value="13"> <input type="checkbox" name="ck" value="14"> <input type="checkbox" name="ck" value="15"> <input type="checkbox" name="ck" value="16"> <input type="checkbox" name="ck" value="17"> <input type="checkbox" name="ck" value="18"> <input type="checkbox" name="ck" value="19"> <input type="checkbox" name="ck" value="20"> <input type="checkbox" name="ck" value="21"> <input type="checkbox" name="ck" value="22"> <input type="checkbox" name="ck" value="23"> <input type="checkbox" name="ck" value="24"> </div> </div> </div> <div class="col-md-8"> <p class="text-center" id="oldContent"></p> <p class="text-center" id="newContent"></p> </div> </div> </div> <script src="./dist/js/jquery.min.js"></script> <script src="./dist/js/bootstrap.min.js"></script> <script> $(function () { $('[name=defaultSel]').empty(); // 清空 $('[name=defaultSel]').prepend("<option value='default'>請選擇</option>").val('default'); //---------------------------------------------------------------------------------------- // 初始化清空數據 $('[name=default1]').empty(); $('[name=default1]').prepend("<option value='default'>請選擇</option>").val('default'); Empty2(); Empty3(); // 初始化加載數據 // 第一個下拉菜單追加數據 for (i = 1; i <= 10; i++) { $('[name=default1]').append("<option value='" + i + "'>" + i + "</option>"); } }) // 第一個下拉菜單選擇事件 $('[name=default1]').change(function () { if ($(this).val() === "default") { Empty2(); Empty3(); } else { Empty2(); Empty3(); for (i = 0; i <= 9; i++) { $('[name=default2]').append("<option value=" + $(this).val() + i + ">" + $(this).val() + i + "</option>"); // 解除禁用 $('[name=default2]').removeAttr('disabled'); } } }); // 清空第二個下拉菜單 function Empty2() { $('[name=default2]').empty(); $('[name=default2]').prepend("<option value='default'>請選擇</option>").val('default'); // 禁用 $('[name=default2]').attr('disabled', 'disabled'); } // 第二個下拉菜單點擊點擊事件 $('[name=default2]').change(function () { if ($(this).val() === 'default') { Empty3(); } else { Empty3(); for (i = 0; i <= 9; i++) { $('[name=default3]').append("<option value=" + $(this).val() + ">" + $(this).val() + i + "</option>"); // 解除禁用 $('[name=default3]').removeAttr('disabled'); } } }); // 清空第三個下拉菜單 function Empty3() { $('[name=default3]').empty(); $('[name=default3]').prepend("<option value='default'>請選擇</option>").val('default'); // 禁用 $('[name=default3]').attr('disabled', 'disabled'); } // 獲取所有復選框 var cks = $('input[name=ck]'); // 全選 $('[name=getAll]').click(function () { if ($(this).is(':checked')) { cks.each(function () { $(this).prop('checked', true); }); } else { cks.each(function () { $(this).prop('checked', false); }); } }) // 反選 $('[name=fsAll]').click(function () { cks.each(function () { $(this).prop('checked', !$(this).prop('checked'));// 簡單寫法 }); // 判斷全選是否選中 if ($('input[name=getAll]').is(':checked')) $('input[name=getAll]').prop('checked', false); else $('input[name=getAll]').prop('checked', true); }); // 添加點擊事件 $('input[name=addCks]').click(function () { var str = ''; // 追加內容 $('#oldContent').empty();// 清空之前數據 $('#newContent').empty();// 清空之前數據 cks.each(function () { // 循環被選中的 if ($(this).prop('checked')) str += this.value + ','; }); $('#oldContent').append(str); $('#newContent').append(ReturnCon(str)); }) // 清空內容 $('input[name=rem]').click(function () { $('#oldContent').empty(); $('#newContent').empty(); }) // 拆分方法 function ReturnCon(res) { var result = ''; var arr = new Array(); arr = res.split(','); for (var i = 0; i < arr.length; i++) { result += arr[i]; } return result; } </script> </body> </html>