`
hjl416148489
  • 浏览: 23102 次
  • 性别: Icon_minigender_1
  • 来自: 苏州
社区版块
存档分类
最新评论

jQuery全选、反选与获取选中值

阅读更多
今天给大家分享一段基于jQuery的全选、反选与获取选中值。文章结合demo,代码简洁,基本覆盖选项选择操作的方方面面,希望可以帮到有喜欢前端的朋友们。

jQuery全选网页特效演示DEMO:http://www.sucaihuo.com/js/10.html
全选:
$("#selectAll").click(function () { 
   $("#list :checkbox,#all").attr("checked", true);   
});
全不选
$("#unSelect").click(function () {   
   $("#list :checkbox,#all").attr("checked", false);   
});
我们拿音乐网站的歌曲列表来讲述jQuery全选、反选、不选及获取选中值
<ul id="list">  
   <li><label><input type="checkbox" value="1" /> 1.老男孩</label></li>  
   <li><label><input type="checkbox" value="2" /> 2.我最亲爱的</label></li>  
   <li><label><input type="checkbox" value="3" /> 3.邂逅</label></li>  
   <li><label><input type="checkbox" value="4" /> 4.心痛2013</label></li>  
   <li><label><input type="checkbox" value="5" /> 5.要爱爱</label></li>  
   <li><label><input type="checkbox" value="6" /> 6.怎么说我不爱你</label></li>  
</ul>  
<input type="checkbox" id="all" />  
<input type="button" value="全选" class="btn" id="selectAll" />  
<input type="button" value="全不选" class="btn" id="unSelect" />  
<input type="button" value="反选" class="btn" id="reverse" />  
<input type="button" value="获得选中值" class="btn" id="getValue" />

分享到:
评论

相关推荐

    jQuery全选、反选与获取选中值 源码下载

    本篇文章将详细讲解如何利用jQuery实现全选、反选功能,并介绍如何获取选中项的值。这在构建网页表单或者需要用户多选操作的场景中非常常见。 首先,让我们理解全选和反选的基本概念。全选意味着选定所有可选项,而...

    jQuery操作checkbox并获取选中值

    本文将详细讲解如何使用jQuery来操作checkbox,并实现全选、全不选、反选以及获取选中值这四个核心功能。 ### 一、jQuery选择器与checkbox操作 在jQuery中,我们可以使用不同的选择器来选取页面上的checkbox元素。...

    jQuery操作CheckBox的方法介绍(选中,取消,取值)

    5. **获取选中值**:最后,`$("#btn5").click`事件用于获取所有选中CheckBox的值。使用`$("[name='checkbox'][checked]")`选择所有已选中的CheckBox,然后遍历它们,将每个选中项的`value`属性值添加到字符串`str`中...

Global site tag (gtag.js) - Google Analytics