.checkbox:before { content: "\e8ef"; font-family: "iconfont" !important; margin-right: 5px; font-size: 16px; vertical-align: middle; color: #b9b9b9; background: #fff; float: left; font-weight: normal; border-radius: 4px; height: 16px; } .change:before { content: "\e8f1"; font-family: "iconfont" !important; color: #0587db; } .choose { border: 1px solid #ccc; background: none; width: 200px; height: 28px; font-size: 14px; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-radius: 4px; } </style> </head> <body> <input type="button" class="form-control choose" value="choose"> <div class="box"> <div class="check-left"> <li><input type="checkbox" class="checkbox" id="mem"><label for="m">member</label></li> <li><input type="checkbox" class="checkbox" id="role"><label for="role">role</label></li> <li><input type="checkbox" class="checkbox" id="name"><label for="n">name</label></li> </div> <div class="check-right"> <li><input type="checkbox" class="checkbox" id="1" name="mem"><label for="1">taka</label></li> <li><input type="checkbox" class="checkbox" id="2" name="mem"><label for="2">toru</label></li> <li><input type="checkbox" class="checkbox" id="3" name="mem"><label for="3">ryota</label></li> <li><input type="checkbox" class="checkbox" id="4" name="mem"><label for="4">tomoya</label></li> <li><input type="checkbox" class="checkbox" id="5" name="name"><label for="5">sngk</label></li> <li><input type="checkbox" class="checkbox" id="6" name="name"><label for="6">sxh</label></li> <li><input type="checkbox" class="checkbox" id="7" name="name"><label for="7">xblt</label></li> <li><input type="checkbox" class="checkbox" id="8" name="name"><label for="8">sjzy</label></li> <li><input type="checkbox" class="checkbox" id="9" name="role"><label for="9">vocal</label></li> <li><input type="checkbox" class="checkbox" id="10" name="role"><label for="10">guitar</label></li> <li><input type="checkbox" class="checkbox" id="11" name="role"><label for="11">bass</label></li> <li><input type="checkbox" class="checkbox" id="12" name="role"><label for="12">drum</label></li> </div> </div> <script type="text/javascript"> //模拟复选框 $(".checkbox").on("click", function() { if ($(this).is(".change")) { $(this).removeClass("change"); } else { $(this).addClass("change"); } }); //checkbox 联动 //member checkbox $('#mem').on('click',function(){ if(this.checked) { $("input[name='mem']").attr('checked',true).addClass("change"); }else { $("input[name='mem']").attr('checked',false).removeClass("change"); } }); $('[name="mem"]:checkbox').click(function(){ var $mL=$('[name="mem"]:checkbox').length; var $checkedL=$('[name="mem"]:checkbox').filter(':checked').length; if($mL==$checkedL){ $('#mem').prop('checked', true).addClass("change"); }else{ $('#mem').prop('checked', false).removeClass("change"); } }); //role checkbox $('#role').on('click',function(){ if(this.checked) { $("input[name='role']").attr('checked',true).addClass("change"); }else { $("input[name='role']").attr('checked',false).removeClass("change"); } }); $('[name="role"]:checkbox').click(function(){ var $roleL=$('[name="role"]:checkbox').length; var $checkedL=$('[name="role"]:checkbox').filter(':checked').length; if($roleL==$checkedL){ $('#role').prop('checked', true).addClass("change"); }else{ $('#role').prop('checked', false).removeClass("change"); } }); //name checkbox $('#name').on('click',function(){ if(this.checked) { $("input[name='name']").attr('checked',true).addClass("change"); }else { $("input[name='name']").attr('checked',false).removeClass("change"); } }); $('[name="zx"]:checkbox').click(function(){ var $zxL=$('[name="name"]:checkbox').length; var $checkedL=$('[name="name"]:checkbox').filter(':checked').length; if($zxL==$checkedL){ $('#name').prop('checked', true).addClass("change"); }else{ $('#name').prop('checked', false).removeClass("change"); } }); //choose框val()值 $(".checkbox").on("click", function() { check_val = []; $(".check-right .change").each(function(){ check_val.push($(this).siblings().text()); }); $(".choose").val(check_val); //title显示选择的内容 $(".choose").attr("title",$(".choose").val()); if(!$(".choose").val()){ $(".choose").attr("title",$(".choose").val("choose")); } }); </script> </body> </html><!DOCTYPE html> <html> <head> <title>checkbox</title> <link rel="stylesheet" href="fonts/iconfont.css"> <script src="js/jquery-1.10.1.min.js" type="text/javascript"></script> <style type="text/css"> ul,li { list-style: none; } .box { overflow: hidden; width: 300px; margin-top: 20px; } .check-left { float: left; width: 100px; background: #eee; } .check-right { float: right; width: 200px; } .check-left li, .check-right li { float: left; width: 100px; } .check-left li label, .check-right li label { margin-left: 4px; } .checkbox:before { content: "\e8ef"; font-family: "iconfont" !important; margin-right: 5px; font-size: 16px; vertical-align: middle; color: #b9b9b9; background: #fff; float: left; font-weight: normal; border-radius: 4px; height: 16px; } .change:before { content: "\e8f1"; font-family: "iconfont" !important; color: #0587db; } .choose { border: 1px solid #ccc; background: none; width: 200px; height: 28px; font-size: 14px; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-radius: 4px; } </style> </head> <body> <input type="button" class="form-control choose" value="choose"> <div class="box"> <div class="check-left"> <li><input type="checkbox" class="checkbox" id="mem"><label for="m">member</label></li> <li><input type="checkbox" class="checkbox" id="role"><label for="role">role</label></li> <li><input type="checkbox" class="checkbox" id="name"><label for="n">name</label></li> </div> <div class="check-right"> <li><input type="checkbox" class="checkbox" id="1" name="mem"><label for="1">taka</label></li> <li><input type="checkbox" class="checkbox" id="2" name="mem"><label for="2">toru</label></li> <li><input type="checkbox" class="checkbox" id="3" name="mem"><label for="3">ryota</label></li> <li><input type="checkbox" class="checkbox" id="4" name="mem"><label for="4">tomoya</label></li> <li><input type="checkbox" class="checkbox" id="5" name="name"><label for="5">sngk</label></li> <li><input type="checkbox" class="checkbox" id="6" name="name"><label for="6">sxh</label></li> <li><input type="checkbox" class="checkbox" id="7" name="name"><label for="7">xblt</label></li> <li><input type="checkbox" class="checkbox" id="8" name="name"><label for="8">sjzy</label></li> <li><input type="checkbox" class="checkbox" id="9" name="role"><label for="9">vocal</label></li> <li><input type="checkbox" class="checkbox" id="10" name="role"><label for="10">guitar</label></li> <li><input type="checkbox" class="checkbox" id="11" name="role"><label for="11">bass</label></li> <li><input type="checkbox" class="checkbox" id="12" name="role"><label for="12">drum</label></li> </div> </div> <script type="text/javascript"> //模拟复选框 $(".checkbox").on("click", function() { if ($(this).is(".change")) { $(this).removeClass("change"); } else { $(this).addClass("change"); } }); //checkbox 联动 //member checkbox $('#mem').on('click',function(){ if(this.checked) { $("input[name='mem']").attr('checked',true).addClass("change"); }else { $("input[name='mem']").attr('checked',false).removeClass("change"); } }); $('[name="mem"]:checkbox').click(function(){ var $mL=$('[name="mem"]:checkbox').length; var $checkedL=$('[name="mem"]:checkbox').filter(':checked').length; if($mL==$checkedL){ $('#mem').prop('checked', true).addClass("change"); }else{ $('#mem').prop('checked', false).removeClass("change"); } }); //role checkbox $('#role').on('click',function(){ if(this.checked) { $("input[name='role']").attr('checked',true).addClass("change"); }else { $("input[name='role']").attr('checked',false).removeClass("change"); } }); $('[name="role"]:checkbox').click(function(){ var $roleL=$('[name="role"]:checkbox').length; var $checkedL=$('[name="role"]:checkbox').filter(':checked').length; if($roleL==$checkedL){ $('#role').prop('checked', true).addClass("change"); }else{ $('#role').prop('checked', false).removeClass("change"); } }); //name checkbox $('#name').on('click',function(){ if(this.checked) { $("input[name='name']").attr('checked',true).addClass("change"); }else { $("input[name='name']").attr('checked',false).removeClass("change"); } }); $('[name="zx"]:checkbox').click(function(){ var $zxL=$('[name="name"]:checkbox').length; var $checkedL=$('[name="name"]:checkbox').filter(':checked').length; if($zxL==$checkedL){ $('#name').prop('checked', true).addClass("change"); }else{ $('#name').prop('checked', false).removeClass("change"); } }); //choose框val()值 $(".checkbox").on("click", function() { check_val = []; $(".check-right .change").each(function(){ check_val.push($(this).siblings().text()); }); $(".choose").val(check_val); //title显示选择的内容 $(".choose").attr("title",$(".choose").val()); if(!$(".choose").val()){ $(".choose").attr("title",$(".choose").val("choose")); } }); </script> </body> </html>