基于復(fù)選框demo(分享)
更新時間：2017年09月27日 08:37:38 作者：恭一
下面小編就為大家?guī)硪黄趶?fù)選框demo(分享)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
本篇文章是關(guān)于復(fù)選框的，有2種形式：1、全選、反選由2個按鈕實現(xiàn)；2、全選、反選由一個按鈕實現(xiàn)。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>復(fù)選框demo</title>
<script src="../js/jquery-1.10.2.js" type="text/javascript"></script>
<style>
body{ text-align:center}
.con{ margin:100px auto; width:800px; height:400px; border:1px solid #F00; padding-top: 50px;}
</style>
</head>
<body>
<div class="con">
<span><input type='checkbox' name='select' onclick='allSelect()'>全選</span>
<span><input type='checkbox' name='cancel' onclick='unAllSelect()'>反選</span>
<span><input type='checkbox' name='fruit' />蘋果</span>
<span><input type='checkbox' name='fruit' />香蕉</span>
<span><input type='checkbox' name='fruit' />梨子</span>
<span><input type='checkbox' name='fruit' />桃子</span>
<span><input type='checkbox' name='fruit' />西瓜</span>
<br><br><br>
<span><input type='checkbox' id="allBook" name='allBook' />全選</span>
<span><input type='checkbox' name='book' />老子</span>
<span><input type='checkbox' name='book' />尚書</span>
<span><input type='checkbox' name='book' />周易</span>
<span><input type='checkbox' name='book' />詩經(jīng)</span>
<span><input type='checkbox' name='book' />孟子</span>
<span><input type='checkbox' name='book' />中庸</span>
<script type="text/javascript">
//全選
function allSelect(){
$("input[name='fruit']").prop("checked", "checked");
$("input[name='cancel']").removeAttr("checked");
}
//反選
function unAllSelect(){
$("input[name='fruit']").removeAttr("checked");
$("input[name='select']").removeAttr("checked");
}
//單選
$("#allBook").click(function(){
if(this.checked){
// $("input[name='book']").attr("checked", true);
$("input[name='book']").prop("checked", "checked");
}else{
// $("input[name='book']").attr("checked", false);
$("input[name='book']").removeAttr("checked");
}
});
</script>
</div>
</body>
</html>
在實踐中碰到一個問題——check全選失效。解決辦法，使用prop方法代替attr。
$("input[name='book']").attr("checked", "checked");
$("input[name='book']").prop("checked", "checked");
這或許是和jQuery版本有關(guān)。
以上這篇基于復(fù)選框demo(分享)就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript ServiceWorker API的好處就是讓W(xué)EB開發(fā)人員輕松的控制緩存。這篇文章主要為大家詳細(xì)介紹了Javascript緩存API，感興趣的小伙伴們可以參考一下2016-06-06
這篇文章主要介紹了JS使用JSON作為參數(shù),結(jié)合實例形式分析了ajax傳遞json數(shù)據(jù)及數(shù)據(jù)處理的相關(guān)技巧,需要的朋友可以參考下2016-06-06
javascript 正則表達(dá)式觸發(fā)函數(shù)進行高級替換
如果在正則表達(dá)式中定義了子匹配，那么參數(shù)的長度會隨著子匹配的個數(shù)改變，如果沒有定義子匹配，那么長度是固定的。2010-03-03
在頁面中js獲取光標(biāo)/鼠標(biāo)的坐標(biāo)及光標(biāo)的像素坐標(biāo)
頁面JS光標(biāo)/鼠標(biāo)坐標(biāo)，百度統(tǒng)計中有個熱點統(tǒng)計圖，我們要做的就是獲取光標(biāo)的像素坐標(biāo)2013-11-11
Threejs與Tween.js結(jié)合創(chuàng)建動畫的詳細(xì)圖文教程
three.js和tween.js可以一起使用,實現(xiàn)復(fù)雜的動畫效果,包括飛線動畫,這篇文章主要給大家介紹了關(guān)于Threejs與Tween.js結(jié)合創(chuàng)建動畫的相關(guān)資料,需要的朋友可以參考下2024-01-01
Bootstrap 樹控件使用經(jīng)驗分享(圖文解說)
很多項目中使用樹來展示層級關(guān)系，還有些樹是為了選中項然后其他地方調(diào)用選中項。今天腳本之家小編給大家?guī)砹薆ootstrap 樹控件使用經(jīng)驗分享，需要的朋友參考下吧2017-11-11
bootstrap中使用google prettify讓代碼高亮的方法
使用google prettify 讓代碼高亮非常漂亮，接下來通過本文給大家介紹bootstrap中使用google prettify讓代碼高亮的方法，感興趣的朋友一起看看吧2016-10-10
這篇文章主要為大家詳細(xì)介紹了Bootstrap三種表單布局的使用方法，感興趣的小伙伴們可以參考一下2016-06-06
在Monaco Editor中實現(xiàn)斷點設(shè)置的方法詳解
Monaco Editor 是 vscode 等產(chǎn)品使用的代碼編輯器,功能強大（且復(fù)雜）,由微軟維護,本文在 React + TypeScript（Vite）框架下使用 @monaco-editor/react 并介紹開發(fā)斷點顯示時踩到的坑,文中有詳細(xì)的代碼示例供大家參考,需要的朋友可以參考下2024-04-04
這篇文章主要為大家詳細(xì)介紹了javascript實現(xiàn)彈出層效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-12-12