標籤：width logs fun log click 記憶 ott isp lock
<!doctype html><html><head> <meta charset="utf-8"> <title>jQuery實現複選框的全選、反選、並且根據複選框的（checked屬性）控制多個對應div的顯示/隱藏</title> <script type="text/javascript" src="jquery-1.11.3.min.js"></script></head><style type="text/css"> #check_all{ margin-left: 45px; } .shows{ display: none; width: 500px; height: 300; background-color: antiquewhite; border-radius: 5px; box-shadow: 3px 3px 3px #ccc; color: blue; padding: 20px; line-height: 30px; margin-bottom: 20px; } .shows div{ text-align: center; margin-bottom: 10px; color:dodgerblue }</style><body><div><input type="checkbox" id="check_all" /> 全選</div><ul id="music_list"> <li><label><input name="music_check" type="checkbox" value="music_1"> 1.時間都去哪兒了</label></li> <li><label><input name="music_check" type="checkbox" value="music_2"> 2.海闊天空</label></li> <li><label><input name="music_check" type="checkbox" value="music_3"> 3.真的愛你</label></li> <li><label><input name="music_check" type="checkbox" value="music_4"> 4.不再猶豫</label></li> <li><label><input name="music_check" type="checkbox" value="music_5"> 5.光輝歲月</label></li> <li><label><input name="music_check" type="checkbox" value="music_6"> 6.喜歡妳</label></li></ul><div class="songs"> <div class="shows" id="music_1"><div>時間都去哪兒了</div>門前老樹長新芽,院兒裡枯木又開花,半生存了好多話,藏進了滿頭白髮,記憶中的小腳丫,肉嘟嘟的小嘴巴,一生把愛交給她,只為那一聲爸媽,時間都去哪兒了,還沒好好感受年輕就老了,生兒養女一輩子,滿腦子都是孩子哭了笑了,時間都去哪兒了,還沒好好看看你眼睛就花了,柴米油鹽半輩子,轉眼就只剩下滿臉的皺紋了 </div> <div class="shows" id="music_2"><div>海闊天空</div>門前老樹長新芽,院兒裡枯木又開花,半生存了好多話,藏進了滿頭白髮,記憶中的小腳丫,肉嘟嘟的小嘴巴,一生把愛交給她,只為那一聲爸媽,時間都去哪兒了,還沒好好感受年輕就老了,生兒養女一輩子,滿腦子都是孩子哭了笑了,時間都去哪兒了,還沒好好看看你眼睛就花了,柴米油鹽半輩子,轉眼就只剩下滿臉的皺紋了 </div> <div class="shows" id="music_3"><div>真的愛你</div>門前老樹長新芽,院兒裡枯木又開花,半生存了好多話,藏進了滿頭白髮,記憶中的小腳丫,肉嘟嘟的小嘴巴,一生把愛交給她,只為那一聲爸媽,時間都去哪兒了,還沒好好感受年輕就老了,生兒養女一輩子,滿腦子都是孩子哭了笑了,時間都去哪兒了,還沒好好看看你眼睛就花了,柴米油鹽半輩子,轉眼就只剩下滿臉的皺紋了 </div> <div class="shows" id="music_4"><div>不再猶豫</div>門前老樹長新芽,院兒裡枯木又開花,半生存了好多話,藏進了滿頭白髮,記憶中的小腳丫,肉嘟嘟的小嘴巴,一生把愛交給她,只為那一聲爸媽,時間都去哪兒了,還沒好好感受年輕就老了,生兒養女一輩子,滿腦子都是孩子哭了笑了,時間都去哪兒了,還沒好好看看你眼睛就花了,柴米油鹽半輩子,轉眼就只剩下滿臉的皺紋了 </div> <div class="shows" id="music_5"><div>光輝歲月</div>門前老樹長新芽,院兒裡枯木又開花,半生存了好多話,藏進了滿頭白髮,記憶中的小腳丫,肉嘟嘟的小嘴巴,一生把愛交給她,只為那一聲爸媽,時間都去哪兒了,還沒好好感受年輕就老了,生兒養女一輩子,滿腦子都是孩子哭了笑了,時間都去哪兒了,還沒好好看看你眼睛就花了,柴米油鹽半輩子,轉眼就只剩下滿臉的皺紋了 </div> <div class="shows" id="music_6"><div>喜歡妳</div>門前老樹長新芽,院兒裡枯木又開花,半生存了好多話,藏進了滿頭白髮,記憶中的小腳丫,肉嘟嘟的小嘴巴,一生把愛交給她,只為那一聲爸媽,時間都去哪兒了,還沒好好感受年輕就老了,生兒養女一輩子,滿腦子都是孩子哭了笑了,時間都去哪兒了,還沒好好看看你眼睛就花了,柴米油鹽半輩子,轉眼就只剩下滿臉的皺紋了 </div></div> <script type="text/javascript">$(document).ready(function() { //全選 $("#check_all").click(function(){ if($(this).prop("checked") == true){ $(this).attr("checked","checked"); $("#music_list :checkbox").prop("checked", true); $(‘.shows‘).css(‘display‘,‘block‘); }else if($(this).prop("checked") == false){ $(this).removeAttr("checked"); $("#music_list :checkbox").prop("checked",false); $(‘.shows‘).css(‘display‘,‘none‘); } }); //checked複選框控制相應div的顯/隱 $("input[name=‘music_check‘]").each(function (){ $(this).click(function () { //if(this.checked){ if ($(this).prop("checked") == true){ $("#" + $(this).val()).show(); //$(this).attr("checked",true); } else { $("#" + $(this).val()).hide(); //$(this).attr("checked",false); } }); }); });</script></body></html>View Code
_______________
jQuery實現複選框的全選、反選、並且根據複選框的<checked屬性>控制多個對應div的顯示/隱藏
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
