jQuery爱好选择器

2021-11-20 22:32:19 阅读：171 来源： 互联网

标签：jQuery function checked items 爱好点击全选选择器

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>全选练习</title>
</head>
<body>

<form>
  你爱好的运动是？<input type="checkbox" id="checkedAllBox"/>全选/全不选

  <br/>
  <input type="checkbox" name="items" value="足球"/>足球
  <input type="checkbox" name="items" value="篮球"/>篮球
  <input type="checkbox" name="items" value="羽毛球"/>羽毛球
  <input type="checkbox" name="items" value="乒乓球"/>乒乓球
  <br/>
  <input type="button" id="checkedAllBtn" value="全　选"/>
  <input type="button" id="checkedNoBtn" value="全不选"/>
  <input type="button" id="checkedRevBtn" value="反　选"/>
  <input type="button" id="sendBtn" value="提　交"/>
</form>

<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript">
  /*
   功能说明:
   1. 点击'全选': 选中所有爱好
   2. 点击'全不选': 所有爱好都不勾选
   3. 点击'反选': 改变所有爱好的勾选状态
   4. 点击'提交': 提示所有勾选的爱好
   5. 点击'全选/全不选': 选中所有爱好, 或者全不选中
   6. 点击某个爱好时, 必要时更新'全选/全不选'的选中状态
   */
  var $checkedAllBox = $('#checkedAllBox')
  var $items = $(':checkbox[name=items]')

  // 1. 点击'全选': 选中所有爱好
  $('#checkedAllBtn').click(function () {
    $items.prop('checked', true)
    $checkedAllBox.prop('checked', true)
  })

  // 2. 点击'全不选': 所有爱好都不勾选
  $('#checkedNoBtn').click(function () {
    $items.prop('checked', false)
    $checkedAllBox.prop('checked', false)
  })

  // 3. 点击'反选': 改变所有爱好的勾选状态
  $('#checkedRevBtn').click(function () {
    $items.each(function () {
      this.checked = !this.checked
    })

    //==先转换类型再比较，===先判断类型，如果不是同一类型直接为false。 
    $checkedAllBox.prop('checked', $items.filter(':not(:checked)').length===0)
  })

  //4. 点击'提交': 提示所有勾选的爱好
  $('#sendBtn').click(function () {
    $items.filter(':checked').each(function () {
      alert(this.value)
    })
  })

  // 5. 点击'全选/全不选': 选中所有爱好, 或者全不选中
  $checkedAllBox.click(function () {
    $items.prop('checked', this.checked)
  })

  // 6. 点击某个爱好时, 必要时更新'全选/全不选'的选中状态
  //可以直接找到所有的符合条件的对象然后直接一次性.click全部绑定点击事件，
  //不用一个一个的绑定
  $items.click(function () {
    $checkedAllBox.prop('checked', $items.filter(':not(:checked)').length===0)
  })
</script>
</body>

</html>

标签：jQuery,function,checked,items,爱好,点击,全选,选择器
来源： https://www.cnblogs.com/anjingdian/p/15582843.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

jQuery爱好选择器