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>