下面小编就为大家带来一篇基于复选框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>
   <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(分享)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持爱安网。

最新资讯
猎豹移动第三季度营收3.651亿元 同比下滑60.3%

猎豹移动第三季度营收

猎豹移动今日公布了截至9月30日的2020年第三季度财报,
对话李兰娟:人工智能将疫情“一网打尽”,让医疗更精准

对话李兰娟:人工智能将

“突如其来的新冠肺炎疫情大流行再次表明,面对严峻挑战
威马汽车与Uber达成意向性协议 EX5或将出口至欧洲

威马汽车与Uber达成意

一位消息人士对新浪科技透露,威马已经与Uber签署了意向
第三季度净利润下滑六成 华米科技仍未摆脱增收不增利

第三季度净利润下滑六

目前华米自有品牌占营收比重尽管较之前有所增长,但目前
对话天鹅到家CEO陈小华:公共卫生事件倒逼数字化进程加速

对话天鹅到家CEO陈小

“疫情倒逼我们改变,建立对家政服务人员的赋能和管理运
震撼、激动、兴奋!赵立坚:期待嫦五带回来自月球的问候

震撼、激动、兴奋!赵立

赵立坚表示,嫦娥五号划破夜空的图片很震撼,带着发射轰鸣
最新文章
详解Vue的ref特性的使用

详解Vue的ref特性的使

这篇文章主要介绍了详解Vue的ref特性的使用,文中通过
vue学习笔记之slot插槽基本用法实例分析

vue学习笔记之slot插

这篇文章主要介绍了vue学习笔记之slot插槽基本用法,结
vue跳转方式(打开新页面)及传参操作示例

vue跳转方式(打开新页

这篇文章主要介绍了vue跳转方式(打开新页面)及传参操作,
vue学习笔记之过滤器的基本使用方法实例分析

vue学习笔记之过滤器

这篇文章主要介绍了vue学习笔记之过滤器的基本使用方
js获取本日、本周、本月的时间代码

js获取本日、本周、本

本篇文章给大家分享的内容是利用js如何获取本日、本周
node crawler如何添加promise支持

node crawler如何添加

这篇文章主要介绍了node crawler如何添加promise支持,