基于復選框demo(分享)
更新時間：2017年09月27日 08:37:38 作者：恭一
下面小編就為大家?guī)硪黄趶瓦x框demo(分享)。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
本篇文章是關于復選框的，有2種形式：1、全選、反選由2個按鈕實現；2、全選、反選由一個按鈕實現。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>復選框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' />詩經</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版本有關。
以上這篇基于復選框demo(分享)就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
JavaScript ServiceWorker API的好處就是讓WEB開發(fā)人員輕松的控制緩存。這篇文章主要為大家詳細介紹了Javascript緩存API，感興趣的小伙伴們可以參考一下2016-06-06
這篇文章主要介紹了JS使用JSON作為參數,結合實例形式分析了ajax傳遞json數據及數據處理的相關技巧,需要的朋友可以參考下2016-06-06
javascript 正則表達式觸發(fā)函數進行高級替換
如果在正則表達式中定義了子匹配，那么參數的長度會隨著子匹配的個數改變，如果沒有定義子匹配，那么長度是固定的。2010-03-03
頁面JS光標/鼠標坐標，百度統(tǒng)計中有個熱點統(tǒng)計圖，我們要做的就是獲取光標的像素坐標2013-11-11
Threejs與Tween.js結合創(chuàng)建動畫的詳細圖文教程
three.js和tween.js可以一起使用,實現復雜的動畫效果,包括飛線動畫,這篇文章主要給大家介紹了關于Threejs與Tween.js結合創(chuàng)建動畫的相關資料,需要的朋友可以參考下2024-01-01
很多項目中使用樹來展示層級關系，還有些樹是為了選中項然后其他地方調用選中項。今天腳本之家小編給大家?guī)砹薆ootstrap 樹控件使用經驗分享，需要的朋友參考下吧2017-11-11
bootstrap中使用google prettify讓代碼高亮的方法
使用google prettify 讓代碼高亮非常漂亮，接下來通過本文給大家介紹bootstrap中使用google prettify讓代碼高亮的方法，感興趣的朋友一起看看吧2016-10-10
這篇文章主要為大家詳細介紹了Bootstrap三種表單布局的使用方法，感興趣的小伙伴們可以參考一下2016-06-06
Monaco Editor 是 vscode 等產品使用的代碼編輯器,功能強大（且復雜）,由微軟維護,本文在 React + TypeScript（Vite）框架下使用 @monaco-editor/react 并介紹開發(fā)斷點顯示時踩到的坑,文中有詳細的代碼示例供大家參考,需要的朋友可以參考下2024-04-04
這篇文章主要為大家詳細介紹了javascript實現彈出層效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-12-12