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>