快捷導(dǎo)航

js實(shí)現(xiàn)功能比較全面的全選和多選

更新時(shí)間：2017年03月02日 15:59:33 作者：luo8481824

本文主要分享了js實(shí)現(xiàn)功能比較全面的全選和多選的示例代碼，具有很好的參考價(jià)值。下面跟著小編一起來看下吧

效果圖：

代碼如下：

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
 </head>
 <body>
 <input type="checkbox" id="checkbox" value="1" onclick="check()" />水果 <br />
 <input type="checkbox" value="${article.id}" name="box" class="item" />奶茶<br />
 <input type="checkbox" value="${article.id}" name="box" class="item"/>香蕉<br />
 <input type="checkbox" value="${article.id}" name="box" class="item"/>橘子<br />
 <input type="checkbox" value="${article.id}" name="box" class="item"/>蘋果<br />
 <input type="checkbox" value="${article.id}" name="box" class="item"/>梨子<br />
 <script type="text/javascript">
 function quanxuan(){
 var $checkbox = $(".item"); 
 var $checked = $checkbox.filter(":checked");
 if($checkbox.length == $checked.length){
  $("#checkbox").prop("checked",true);
 }else{
  $("#checkbox").prop("checked",false);
 }
 }
 $(function(){
 $("#checkbox").on("change",function(){
  var checked = $(this).prop("checked"); // true / false
  $(".item").prop("checked",checked);
  quanxuan();
 });
 $("body").on("change" , ".item",function(e){
  quanxuan();
 });
 }); 
 </script>
 </body>
</html>

以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時(shí)也希望多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

深入淺析JavaScript中數(shù)據(jù)共享和數(shù)據(jù)傳遞
這篇文章主要介紹了深入淺析JavaScript中數(shù)據(jù)共享和數(shù)據(jù)傳遞的相關(guān)資料,需要的朋友可以參考下
2016-04-04
JS對(duì)日期操作封裝代碼實(shí)例
這篇文章主要介紹了JS對(duì)日期操作封裝代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2019-11-11
javascript實(shí)現(xiàn)簡(jiǎn)單小鋼琴有聲彈奏效果
用HTML5+javascript實(shí)現(xiàn)的小鋼琴,按下鋼琴鍵上的相應(yīng)字母用或用鼠標(biāo)點(diǎn)擊鋼琴鍵發(fā)聲,javascript代碼包含了對(duì)鼠標(biāo)按下、移動(dòng)和松開,以及鍵盤按下的事件監(jiān)聽
2024-02-02
Promise 鏈?zhǔn)秸{(diào)用原理精簡(jiǎn)示例
這篇文章主要為大家介紹了Promise 鏈?zhǔn)秸{(diào)用原理精簡(jiǎn)示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-12-12
代碼整潔之道(重構(gòu))
這篇文章主要介紹了代碼整潔之道(重構(gòu))，不管對(duì)于何種語言，重構(gòu)都是軟件開發(fā)過程中不可或缺的一部分，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-10-10
JavaScript中事件委托的示例詳解
所謂事件委托，就是將原本應(yīng)該在當(dāng)前元素綁定的事件，放到它的祖先元素上，讓祖先元素來委托處理。今天我們來認(rèn)識(shí)一下JS中的事件委托
2022-07-07
javascript實(shí)現(xiàn)的listview效果
javascript實(shí)現(xiàn)的listview效果...
2007-04-04
JS畫布動(dòng)態(tài)實(shí)現(xiàn)黑客帝國(guó)背景效果
這篇文章主要為大家詳細(xì)介紹了JS畫布動(dòng)態(tài)實(shí)現(xiàn)黑客帝國(guó)背景效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-11-11
js判斷瀏覽器類型的方法
這篇文章介紹了js判斷瀏覽器類型的方法，有需要的朋友可以參考一下
2013-08-08
代碼塊高亮可復(fù)制顯示js插件highlight.js+clipboard.js整合
最近有個(gè)需求是將jsp頁面上的某一段代碼塊格式化成類似CSDN的代碼塊的樣式，而且很多平臺(tái)都使用了這樣的功能，下面就為大家簡(jiǎn)單分享一下
2021-02-02