jQuery实现全选按钮

本文实例为大家分享了jQuery实现全选按钮的具体代码，供大家参考，具体内容如下

代码：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>全选练习</title>
 <script src="../js/jquery-1.8.2.min.js"></script>
 <script>
 $(function(){
 //获取全选/不全选的checkbox
 var $chooseAll= $('#chooseAll')
 //获取所有多选框并且name=items的多选框
 var $checkedAll=$(':checkbox[name=items]')
 $('#btn1').click(function(){
 //使得所有的爱好多选框都选中
 $checkedAll.prop('checked',true)
 //当所有爱好多选框都选中的时候全选框也选中
 $('#chooseAll').prop('checked',true)
 })
 $('#btn2').click(function(){
 //使得所有的爱好多选框都不选中
 $checkedAll.prop('checked',false)
 //当所有爱好多选框都不选中的时候全选框也不选中
 $('#chooseAll').prop('checked',false)
 })
 $('#btn3').click(function(){
 //进行遍历所有爱好多选框，
 $checkedAll.each(function(){
 //如果选择则为不选进行反选
  this.checked=!this.checked;
 })
 //这里对所有的爱好多选框进行过滤，过滤选中的，
 //如果全部选中就过滤掉length===0返回true，有一个没选中就返回false，
 $chooseAll.prop('checked',$checkedAll.filter(':not(:checked)').length===0)
 })
 $('#btn4').click(function(){
 //遍历输出选中就会输出对应的爱好
 $checkedAll.filter(':checked').each(function(){
  alert(this.value)
 })
 })
 $checkedAll.click(function(){
 //判断在操作爱好的时候是否全选
  $chooseAll.prop('checked',$checkedAll.filter(':not(:checked)').length===0)
 })
 $chooseAll.click(function(){
 //点击多选框的全选按钮，所的爱好都选中或者全不选中。
 $checkedAll.prop('checked',this.checked)
 })
 })
 </script>
</head>
<body>
 <form action="" method="post" id="form">
 你爱好的运动是？<input type="checkbox" name="chooseAll" id="chooseAll" />全选/全不选
 <br/>
 <input type="checkbox" name="items" id="chooseSoccer" value="足球"/>足球
 <input type="checkbox" name="items" id="chooseBasketball" value="篮球" />篮球
 <input type="checkbox" name="items" id="chooseBadminto" value="羽毛球" />羽毛球
 <input type="checkbox" name="items" id="choosePingPong" value="乒乓球" />乒乓球
 <br/>
 <input type="button" name="" id="btn1" value="全选" />
 <input type="button" name="" id="btn2" value="全不选" />
 <input type="button" name="" id="btn3" value="反选" />
 <input type="button" name="" id="btn4" value="提交" />
 </form>
</body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • JQuery操作单选按钮以及复选按钮示例

    单选按钮以及复选按钮在开发过程中会经常用到,下面我就来通过JQuery操作单选按钮和复选按钮: 单选按钮: 通过JQuery获取单选按钮对象我们总共有三种途径: ①ID:$("#radioId") ②NAME:$(":input[name='radioName']") ③TYPE:$("input[type=radio]"),可能在有的资料上面写的是:$(""input[@type=radio]""),这个

  • 基于jquery自定义的漂亮单选按钮RadioButton

    基于jquery自定义的漂亮单选按钮RadioButton

    继续分享web前端自定义控件,今天所要分享的控件是单选按钮,希望对你有收获,有好的建议也希望能留言给我.代码如下: Html代码如下: 复制代码 代码如下: <div style="margin:50px;float:left;"> <b class="radio" _txt="单选我"></b> <b class="radio" _txt="单选你"><

  • jQuery设置单选按钮radio选中/不可用的实例代码

    jQuery设置单选按钮radio选中/不可用的实例代码

    因为本 part 是"jQuery日常使用篇",所以都是由具体需求出发,总结需要用到的知识点.代码写得未必很好,达到目标就好.那么我们先来看看这次的需求:色块模式基于彩色模式,即开了彩色才能开色块,彩色处于关闭的时候色块不可用,开启彩色时色块radio可用,关闭彩色时如果色块处于开的话需要把它关掉,大概就这样. 我们先来看看演示效果: 我们接下来看看jQuery对单选按钮 radio 的操作. 1. 彩色处于关闭的时候色块不可用 需要两步,当页面打开时,检测如果彩色关闭的话,让色块的&

  • JQuery radio（单选按钮）操作方法汇总

    JQuery radio（单选按钮）操作方法汇总

    随着Jquery的作用越来越大,使用的朋友也越来越多.在Web中,由于CheckBox.Radiobutton .DropDownList等控件使用的频率比较高,就关系到这些控件在Jquery中的操作问题.由于Jquery的版本更新很快,代码的写法也改变了许多,以下Jquery代码适query1.4版本以上. 1.获取选中值,三种方法都可以: 复制代码 代码如下: $('input:radio:checked').val(): $("input[type='radio']:checked&quo

  • jQuery模仿单选按钮选中效果

    jQuery模仿单选按钮选中效果

    刚开始学jquery,工作中有些css表单中的按钮美化很麻烦,所以想着用jquery来替换,复选框的jquery很容易,就是简单的样式切换效果,用toggleClass()方法即可. 而单选框之前一直不知道怎么做,因为在单选框中选中一个,其他的都必须移除掉样式,如果2个单选框在同级中则用siblings()则可直接找到其他单选框移除掉样式即可.鉴于自己工作是循环列表模式,每个<li>里面都带有一个单选框,未发现jquery中parent()这个好用的方法,以致于纠结了半天. css如下: &l

  • jQuery实现按钮的点击 全选/反选 单选框/复选框 文本框 表单验证

    jQuery实现按钮的点击 全选/反选 单选框/复选框 文本框 表单验证 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>My JSP 'index.jsp' starting page</title> &l

  • jQuery获取选中单选按钮radio的值

     实例1: <div id="wrap"> <input type="radio" name="payMethod" value="1" />男 <input type="radio" name="payMethod" value="2" />女 </div> 获取一组单选按钮对象:var obj_payPlatform

  • jquery实现标签支持图文排列带上下箭头按钮的选项卡

    带上下箭头jquery垂直tab选项卡切换标签,技持左侧列表上下滚动,滚动到底部带信息提示. 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml

  • jquery判断单选按钮radio是否选中的方法

    本文实例讲述了jquery判断单选按钮radio是否选中的方法.分享给大家供大家参考.具体如下: html代码如下: <input type="radio" id="d1" name="ra" value="a" checked="checked" /> <input type="radio" id="d2" name="ra"

  • jQuery获取单选按钮radio选中值与去除所有radio选中状态的方法

    如下所示: 喜欢<input type="radio" name="likea" id="" value="3" /> 一般<input type="radio" name="likea" id="" value="2" /> 不喜欢<input type="radio" name="li

随机推荐