js實現(xiàn)功能比較全面的全選和多選
更新時間：2017年03月02日 15:59:33 作者：luo8481824
本文主要分享了js實現(xiàn)功能比較全面的全選和多選的示例代碼，具有很好的參考價值。下面跟著小編一起來看下吧
效果圖：
代碼如下：
<!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>
以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！
您可能感興趣的文章:
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了JavaScript實現(xiàn)滑塊驗證案例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-01-01
這篇文章主要介紹了JavaScript常用工具函數(shù),匯總整理了各種JavaScript常用工具函數(shù),包括獲取、判斷、轉(zhuǎn)換、設(shè)置等相關(guān)功能函數(shù)的定義與使用方法,需要的朋友可以參考下2020-05-05
在iFrame子頁面里實現(xiàn)模態(tài)框的方法
今天小編就為大家分享一篇在iFrame子頁面里實現(xiàn)模態(tài)框的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了js中獲取一個月有多少天的方法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
寫了幾年代碼，很少談到j(luò)avascript程序的執(zhí)行效率問題，今天就舉幾個例子看看，讓大家看看程序優(yōu)化是多么重要。 這節(jié)來看看createElement和innerHTML的表現(xiàn)?？纯床顒e是多大2008-05-05
在實現(xiàn)繼承的時候，用到了兩個很特殊的方法，call和apply，下面，我就來說一下這個兩個方法2014-05-05
axios的get請求傳入數(shù)組參數(shù)原理詳解
這篇文章主要為大家介紹了axios的get請求傳入數(shù)組參數(shù)原理詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
這篇文章主要給大家介紹了關(guān)于ES6中Set與WeakSet集合的相關(guān)資料,Set是ES6給開發(fā)者帶來的一種新的數(shù)據(jù)結(jié)構(gòu),你可以理解為值的集合,WeakSet結(jié)構(gòu)同樣不會存儲重復(fù)的值,但它的成員必須是對象類型的值,需要的朋友可以參考下2021-07-07
這篇文章主要為大家介紹了ts封裝axios最佳實踐示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
本文主要介紹了DOM事件的相關(guān)知識。具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02