学习笔记——多选框的全选，全不选和反选

最新推荐文章于 2020-10-15 15:57:42 发布
最新推荐文章于 2020-10-15 15:57:42 发布
阅读量56 收藏
点赞数
文章标签： xhtml javascript ViewUI
原文链接：http://www.cnblogs.com/mrzhangkang/p/5302215.html
版权

实现全选全不选和反选效果,实现比较简单，主要是利用到checked的属性

<!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">
 <head>
  <title> new document </title>
  <meta name="generator" content="editplus" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="description" content="" />
 </head>

 <body>
  <input type="checkbox" name="love">zuqiu</br>
    <input type="checkbox" name="love">zuqiu</br>
      <input type="checkbox" name="love">zuqiu</br>
        <input type="checkbox" name="love">zuqiu</br>
          <input type="checkbox" name="love">zuqiu</br>
          <input type="button" name="a1" value="全选 " οnclick="test1()">
          <input type="button" name="a1" value="全不选" οnclick="test2()">
          <input type="button" name="a1" value="反选" οnclick="test3()">
<script type="text/javascript">
function test1()
{
    var loves=document.getElementsByName("love");
    for (i=0;i<loves.length ;i++ )
    {
        loves[i].checked=true;
    }
}

function test2()
{
    var loves=document.getElementsByName("love");
    for (i=0;i<loves.length ;i++ )
    {
        loves[i].checked=false;
    }
}
function test3()
{
    var loves=document.getElementsByName("love");
    for (i=0;i<loves.length ;i++ )
    {
        if(loves[i].checked==true){
        loves[i].checked=false;
        }else{
            loves[i].checked=true;
        }
    }
}
</script>
 </body>
</html>

转载于:https://www.cnblogs.com/mrzhangkang/p/5302215.html

weixin_30914981
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
android checkbox全选反选
01-09
android checkbox全选反选
JavaScript--点击按钮实现复选框全选和反选功能
博客
08-20 7300
功能实现： 1、点击全选和反选按钮，实现复选框全选和部分选的功能 2、点击全选复选框，实现子复选框全选或全不选功能 完整代码： 学号 姓名 班级
JS利用复选框实现全选和反选
big_data1的博客
01-17 1万+
需求： A.全选： 点击全选，所有选项被选中； B.全不选：全选情况下再次点击全选框，所有选项都不选； C:全选情况下，取消某一个或几个子选项，全选框也变为不选中； 没有点击全选的情况下，选中了所有子选项，全选框自动选中。代码示例：html代码： 全选 1选 2选 3选 4选 JAvaScript代码： function setChecked(obj)
（html/js）多选复选框自动全选/反选实例
Xi's LiuY
11-29 886
测试结果： 点击全选时，选中所有选项： html部分代码： 全选/复选框 全选 篮球 足球 排球 js部分代码： /** * Created by LY on 2016/11/28. */ window.onload= function() { var all = document.getElem
jQuery实现复选框全选和反选，单选和多选
低调哥的博客
01-26 1887
//联动复选框 $('.checked-all').click(function () { //全选反选 $('input:checkbox').prop('checked', $(this).prop('checked')); }); //单选和多选 $('input:checkbox').on('click', function() { if($('.s-data-li
react实现复选框全选和反选组件效果
10-14
主要为大家详细介绍了react实现复选框全选和反选组件效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
JS随手记——复选框的全选、全不选与反选
01-08
分析：获取到复选框数组后，循环对复选框的选择状态赋值，全选赋true值，全不选赋false值，反选赋其相反值 页面大致如下： 页面部分代码如下： 篮球 唱歌 美术 弹琴 游泳 其中，全选与全不选均调用...
基于jQuery实现复选框的全选 全不选 反选功能
12-11
本代码是在众多的jQuery复选框功能代码中精选出来的，本人项目中使用的代码，这里分享给大家。 jQuery代码： 代码如下:  $(function(){  $(“#checkedAll”).click(function(){  $(‘[name=items]:checkbox’)...
复选框全选与全不选操作实现思路
09-05
通过js简单实现下复选框全选与全不选，很常用的一个操作，具体实现思路及代码如下，有需求的朋友可以参考下，希望对大家有所帮助
Axure RP 复选框全选、反选
11-26
用Axure RP 8.0做的原型设计列子，作用是复选框做全选和非全选，已选的做反选。可以学习下反选或非反选的交互思路。
自定义复选框checkbox样式
热门推荐
justforuse的博客
07-31 4万+
复选框作为网页中比较常见的一个组件，有的时候我们需要对它进行美化，但是我们无法直接为其定义样式，所以我们需要一些其它的办法。表单元素中有label 元素和 for属性，当我们点击label 标签时，对应的表单元素就会有所反应。我们就是依据这个特性来实现的。html:<body> <input type="checkbox" id="myCheck"> <label for="myCh
css 简单的多选框全选全不选和反选
yedaiyang的博客
11-30 3262
80000   九张机   说散就散   尽头   追光者                var xuan = document.getElementById("xuan");    var bu = document.getElementById("bu");    var fan = document.getElementById("fan");    var ck1
HTML多选框，全选，多选
anzhen9的博客
08-17 1万+
项目中用到的，结合网上看的一些例子，整了一个，多选全选的玩意儿，如有雷同纯属巧合（手动滑稽） 没有做反选操作相关的功能 用jquery整的 然后对应的全选checkbox 再然后就是那一堆的多选checkbox了 来个效果的。。。。
jQuery实现多选框的全选与反选
.非友的博客
10-15 473
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>全选与反选</title> <script src="js/jquery-1.8.2.min.js"></script> </head> <body> <form> <input type="checkbox" name="c
用JavaScript实现多选框的全选和反选
woshileiyaohua的博客
10-10 253
目录代码htmljavaScript效果全选全不选反选 代码 html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>复选框的全选和反选</title> </he
JavaScript 多选框多选与取消多选实例：
bm15533984642的博客
08-09 707
: 看书： 写字： 打飞机： 玩游戏： 全选 取消全选 : function checkboxed(objName){ var objNameList=document.getElementsByName(objName); if(null!=objNameList){ alert("全选操作"); for(var i=0;i objNameLis
关于AlertDialog多选框中全选和反选的实现办法
weixin_30359021的博客
12-17 466
1 package mobile.android.ch07.multi.choice.dialog; 2 3 import android.app.Activity; 4 import android.app.AlertDialog; 5 import android.content.DialogInterface; 6 import android.os.Bun...
页面上有10个多选框，实现三个按钮(重置、反选、全选)功能
a496798779的博客
04-25 540
1 <body> 2 <br/> 3 <button id="reset">重置</button> <button id="invert">反选</button> <button id="all">全选</button><br/> 4 <br/> ...
Andriod studio 学习 之 Listview中实现隐藏和显示多选框 实现全选,取消全选,反选,删除
Young_cloud的博客
07-30 624
Listview中实现隐藏和显示多选框 实现全选,取消全选,反选,删除 1.封装一个实体类存放listview中需要添加的内容 package com.example.choose; public class Bean { private String num; private boolean ischecked; public Bean(String num, boo...
table多选框全选,反选
最新发布
09-01
table多选框全选和反选是指在一个表格中，有多行数据需要选择时，可以通过点击一个全选的复选框来同时选中所有行，或者通过点击反选的复选框来选中所有未选中的行，已选中的行则变为未选中状态。 在实现全选功能时...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值