正文 

当前位置： 首页 > java > java教程

jquery实现全选和反选功能

author author     2022-08-13     442

关键词：

jQuery操作复选框的选中和不选中状态非常简单，使用attr()来设置"checked"属性的值，true未选中，false为未选中，在整个全选、反选过程中注意处理全选复选框的选中状态，以及获取选中选项的值。

  1. <ul id="list">     
    1. <li><label><input type="checkbox" value="1"> 1.我是记录来的呢</label></li>    
    2. <li><label><input type="checkbox" value="2"> 2.哈哈，真的太天真了</label></li>    
    3. <li><label><input type="checkbox" value="3"> 3.爱上你是我的错吗？</label></li>    
    4. <li><label><input type="checkbox" value="4"> 4.从开始你就不应用爱上我</label></li>    
    5. <li><label><input type="checkbox" value="5"> 5.喜欢一个人好难</label></li>    
    6. <li><label><input type="checkbox" value="6"> 6.你在那里呢</label></li>  
  2. </ul>  
  3. <input type="checkbox" id="all">  
  4. <input type="button" value="全选" class="btn" id="selectAll">   
  5. <input type="button" value="全不选" class="btn" id="unSelect">   
  6. <input type="button" value="反选" class="btn" id="reverse">   
  7. <input type="button" value="获得选中的所有值" class="btn" id="getValue"> 
  2. $(function () { 
  3.   //全选或全不选 
  4.   $("#all").click(function(){  
  5.     if(this.checked){  
  6.       $("#list :checkbox").attr("checked", true);  
  7.     }else{  
  8.       $("#list :checkbox").attr("checked", false); 
  9.     }  
  10.    }); 
  11.   //全选  
  12.   $("#selectAll").click(function () { 
  13.      $("#list :checkbox,#all").attr("checked", true);  
  14.   });  
  15.   //全不选 
  16.   $("#unSelect").click(function () {  
  17.      $("#list :checkbox,#all").attr("checked", false);  
  18.   });  
  19.   //反选***** 
  20.   $("#reverse").click(function () { 
  21.      $("#list :checkbox").each(function () {  
  22.        $(this).attr("checked", !$(this).attr("checked"));  
  23.      }); 
  24.      allchk(); 
  25.   }); 
  26.      
  27.   //设置全选复选框 
  28.   $("#list :checkbox").click(function(){ 
  29.     allchk(); 
  30.   }); 
  31.     
  32.   //获取选中选项的值 
  33.   $("#getValue").click(function(){ 
  34.     var valArr = new Array; 
  35.     $("#list :checkbox[checked]").each(function(i){ 
  36.       valArr[i] = $(this).val(); 
  37.     }); 
  38.     var vals = valArr.join(‘,‘); 
  39.      alert(vals); 
  40.   }); 
  41. }); 
  42. function allchk(){ 
  43.   var chknum = $("#list :checkbox").size();//选项总个数 
  44.   var chk = 0; 
  45.   $("#list :checkbox").each(function () {  
  46.     if($(this).attr("checked")==true){ 
  47.       chk++; 
  48.     } 
  49.   }); 
  50.   if(chknum==chk){//全选 
  51.     $("#all").attr("checked",true); 
  52.   }else{//不全选 
  53.     $("#all").attr("checked",false); 
  54.   } 
  55. }



来自为知笔记(Wiz)


jquery案例二：实现全选全不选和反选(代码片段)

<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>全选和全不选以及反选</title><scriptsrc="../js/jquery-1.8.3.js"></script><script>$(function()//全选事件$(" 查看详情

jquery版的全选，全不选和反选

<!DOCTYPEhtml><html> <head> <metacharset="UTF-8"> <scriptsrc="js/jquery.js"type="text/javascript"charset="utf-8"></script> <title></title> </head& 查看详情

vue.js实现checkbox的全选和反选

...长度一致，来改变全选的值。 下面来一起看看是怎么实现的吧：一、HTML<template>&nbs 查看详情

checkbox之全选和反选

先导入jquery组件<inputtype="checkbox"id="checkall">全选<inputtype="checkbox"id="checkrev">反选<inputtype="checkbox"name="check1">1<inputtype="checkbox"name="check1">2<script>$(fun 查看详情

实现全选和反选的效果代码

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>全选</title><style>#allinspan{display:inline-block;width:150px;margin-top:10px;font-size:18px;tex 查看详情

js实现复选框的全选全部选和反选

1<!DOCTYPEhtml>2<htmllang="en">3<head>4<metacharset="UTF-8">5<title>checkbox</title>6<styletype="text/css">7.main{8width:400px;9height:400px;10margin:20pxauto 查看详情

angularjs全选功能实现

...要增加全选和反选功能，之前只做过JQ版的全选和反选。实现效果：1.点击全选checkbox可以切换全选和全部清空2.点击列表中的checkbox，当全部选中时全选选中3.在全选状态下点击列表中的checkbox将其置为非选中状态时全选checkbox也... 查看详情

jquery实现全选反选和取消功能

1<!DOCTYPEhtml>2<htmllang="en">3<head>4<metacharset="UTF-8">5<title>JQ实现正、反选</title>6</head>7<body>8<tableborder="1px"style="width:200px;margin-botto 查看详情

jquery实现复选框的全选反选和不选功能

 <!doctypehtml><html><head><metacharset="utf-8"><title>jQuery实现复选框的全选、反选和不选功能</title><scripttype="text/javascript"src="jquery-1.11.3.min.js"></script& 查看详情

全选和反选

//--------------主布局文件----------------------------<RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"   xmlns:tools="http://schemas.android.com/tools"   查看详情

jsreact全选和反选

onCheckAll=(data)=>{ varCheckBox=document.getElementsByName(data); for(leti=0;i<CheckBox.length;i++){if(CheckBox[i].checked==true){CheckBox[i].checked=false;}else{CheckBox[i].checked=true}}; } 查看详情

vue实现单选、全选和反选

...框通过v-model绑定到一个计算属性(checkAll)，这个属性必须实现了getter和setter方法，当model数组长度等于fruits长度，返回true，表示全选。改变checkbox的值时会触发setter方法，如果变为true，表示全选，如果变为false，表示全不选。反... 查看详情

原生js实现全选和反选以及任意一个未被选中的效果

模仿一个百度音乐的全选和反选的的操作。html代码如下：<divclass="box"><ulid="lists"><li><inputtype="checkbox"value=""><span>我爱你中国</span></li><li><inputtype="checkbox"value=""& 查看详情

vue2.0在table中实现全选和反选

...sp;    其实在去年小颖已经写过一篇：Vue.js实现checkbox的全选和反选     小颖今天在跟着慕课网学习vue的过程中，顺便试试如何在table中实现全选和反选，页面的css样式是直接参考慕课网的样式写... 查看详情

jquery实现全选反选和不选功能

HTML我们的页面上有一个歌曲列表，列出多行歌曲名称，并匹配复选框供用户选择，并且在列表下方有一排操作按钮。12345678910111213<ul id="list">  <li><label><input type="checkbox" value="1">1.时间都去哪儿... 查看详情

项目中全选和反选

<scripttype="text/javascript"> //页面加载 //获取onclick对象，并绑定onclick时间 //将所有的checkbox打钩 window.onload=function(){ //获取name的值等于anniu的元素 alert(1); varinput_obj=document.getElementsByName("anniu"); / 查看详情

全选和反选

1<!DOCTYPEhtml>2<html>3<headlang="en">4<metacharset="UTF-8">5<title></title>6</head>7<style>8ul{9list-style:none;10}11</style>12<script>13wi 查看详情

jquery实现的全选反选和不选功能

HTML我们的页面上有一个歌曲列表，列出多行歌曲名称，并匹配复选框供用户选择，并且在列表下方有一排操作按钮。<ulid="list"><li><label><inputtype="checkbox"value="1">1.时间都去哪儿了</label></li><li><label... 查看详情