<!DOCTYPE html> <html lang="en"> <head> <style> ul{ list-style: none; } .menu{ display: none; } </style> <meta charset="UTF-8"> <title></title> </head> <body> <div class="container"> <ul> <li> <input type="checkbox" name="checkbox" class="allchose" /><span>车队1</span><span class="btn"> +</span> <ul class="menu"> <li> <input type="checkbox" name="checkbox1" />1号车 </li> <li> <input type="checkbox" name="checkbox2" />2号车 </li> <li> <input type="checkbox" name="checkbox3" />3号车 </li> <li> <input type="checkbox" name="checkbox4" id="checkbox4" />4号车 </li> </ul> </li> <li> <input type="checkbox" name="checkbox" class="allchose" /><span>车队2</span><span class="btn"> +</span> <ul class="menu"> <li> <input type="checkbox" name="checkbox1" />1号车 </li> <li> <input type="checkbox" name="checkbox2" />2号车 </li> <li> <input type="checkbox" name="checkbox3" />3号车 </li> <li> <input type="checkbox" name="checkbox4" id="checkbox4" />4号车 </li> </ul> </li> </ul> </div> </body> <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> <script> $(function(){ $('.btn').click(function(){ var $menu = $(this).siblings('.menu'); var flag = $menu.is(':hidden'); if(flag){ $menu.slideDown(200); }else{ $menu.slideUp(200); }; }); $('.allchose').click(function(){ var t = $(this).siblings('.menu').find("input[type='checkbox']"); if($(this).is(":checked")){ t.prop("checked",true); console.log('我已经被旋转'); }else{ t.prop("checked",false); } }) }) </script> <script> </script> </html>
