全选、全不选、反选

最新推荐文章于 2024-08-11 18:40:36 发布
最新推荐文章于 2024-08-11 18:40:36 发布
阅读量107 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/taoist123/p/11165825.html
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            width: 300px;
            height: 170px;
            border: 1px solid #c0d9ff;
            margin: auto;
        }

        #title, #state {
            margin-left: 5px;
            width: 280px;
            height: 30px;
            border: 1px solid #c0d9ff;
        }

        #name {
            width: 280px;
            height: 30px;
            border: 1px solid #c0d9ff;
            padding-top: 10px;
            margin-top: 10px;
            margin-left: 5px;
        }
    </style>
</head>
<body>
<p id="title">问卷调查：你最喜欢的歌手是谁？</p>
<div id="state">
<!--    name相同时，按钮不会同时为选中状态-->
    <input class="selectAll" type="radio" name="0">全选
    <input class="selectNone" type="radio" name="0">全不选
    <input class="invertSelect" type="radio" name="0">反选
</div>
<div id="name">
    <input type="checkbox">刘德华
    <input type="checkbox">张学友
    <input type="checkbox">孙燕姿
    <input type="checkbox">刘欢
</div>
<script src="adapter/jquery-3.4.1.js" type="text/javascript"></script>
<script>
    //全选
    $(function () {
        $(".selectAll").on("click", function () {
            $(":checkbox").prop("checked", true);
        });
    //全不选
        $(".selectNone").on("click", function () {
            $(":checkbox").prop("checked", false);
        });

     //取反
        $(".invertSelect").on("click", function () {
            // :checkbox 是type中的选择器，选择全部 type为checkbox的属性
            $(":checkbox").each(function(){
　　　　　　　　//遍历的时候,里面的对象是DOM对象,this是DOM对象
　　　　　　　　//写法一
　　　　　　　　//$(this).prop("checked",!$(this).prop("checked"))
　　　　　　　　　　//写发二:
                $(this).prop("checked",!this.checked);
　　　　　　　　　　　　　

            })
        });
    })
</script>
</body>
</html>

 

 

转载于:https://www.cnblogs.com/taoist123/p/11165825.html

dimangxuan1310
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
全选和反选
qq_41988113的博客
03-15 1717
1. 选中"全选"框，以下所有选项全部勾选。 2. 把"全选"框从选中状态勾选成未选中状态，其他复选框全部取消选中效果。 3. 当其他复选框全部选中，"全选框"为选中状态。 4. 当其他复选框有一个未选中，"全选框"取消选中状态。 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style&
全选与反选
weixin_52163042的博客
12-28 985
全选与反选 具体要求如下： 1）根据数据创建表格； 2）表格在页面中距离上面100像素、水平居中并且其每行内的内容也居中,单元格的高度是：40像素； 3）创建反选按钮并放入表格的下方，按钮的大小为宽：100像素，高：50像素; 4）点击全选按钮则每一项都要选中，如果其中的一项没有选中则全选按钮没有选中 5）点击反选按钮实现反选的功能 <div class="box"> <table> <thead>
全选、全不选、反选功能的实现
飞鱼同学
01-26 4590
全选、全不选、反选 实现的功能是： 选中下面全选框，全部的框都会选中，反之就会全不选中； 当点击反选按钮时，选择框中的选框状态置反，选中的变为没选中，没选中变为选中 直接上代码： index.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>全选、全不选、反选</title> </head> <body> <f
js实现全选，全不选和反选功能
sinat_41660714的博客
11-20 1912
首先来展示一下 上图中实现的功能是： 点击顶部全选框选中，全部的框都会选中，反之就会全不选中； 当表体中选框全部选中时，全选框选中 当点击反选按钮时，表体中的选框状态置反，选中的变为没选中，没选中变为选中 直接上代码，我就不贴表格样式部分代码了，只贴js实现部分 <script> //1， 全选全不选 var all=document.getElementById("all")...
vue实现“全选/全不选/反选”的三个方法
我管它叫“知勤者笔记”，主要用来记录和分享我的日常生活与学习经历
02-21 9821
【代码】vue实现“全选/全不选/反选”的三个方法。
复选框的全选、全不选和反选
weixin_57762552的博客
04-19 4116
如图： 整个页面内容非常少只有五个复选框和三个按钮，如果嫌复选框少的话可以自己手动增加。 HTML内容如下图，但要注意一点就是输入框的tyep属性的属性值一定要是checkbox，因为checkbox就是复选框的意思，在HTML里也是复选框，所以tyep的值一定要是checkbox，要不然它就不是一个复选框。 接下来就是本篇文章的重点，JavaScript部分。 按照惯例首先要获取到所有...
Radio一键实现全选、反选CheckBoxList
java开发指南博客 【转载】
08-23 490
CheckBoxList有时候绑定数据库的数据很多的时候，我们要选择的时候，一个一个地去选择，有点费事，不方便。其实我们可以用Radio一键实现全选、反选CheckBoxList的内容，重要的是给用户制造方便。 1.这是CheckBoxList初始化的数据 2.按全选择的图 3.按取消选择的图 4.反选前的数据 5.反选后的数据 6.实现的代码的js如下：ch...
基于jQuery实现复选框的全选 全不选 反选功能
12-11
本代码是在众多的jQuery复选框功能代码中精选出来的，本人项目中使用的代码，这里分享给大家。 jQuery代码： 代码如下:  $(function(){  $(“#checkedAll”).click(function(){  $(‘[name=items]:checkbox’)...
全选 全不选 反选
08-24
在IT领域，尤其是在网页开发中，"全选、全不选、反选"的功能是非常常见的交互设计，尤其在处理多选项列表时。本例中提到的是一个基于jQuery实现的复选框选择示例，让我们详细了解一下这个主题。 复选框（Checkbox）...
jQuery对checkbox 复选框的全选全不选反选的操作
10-21
主要介绍了jQuery对checkbox 复选框的全选全不选反选的操作 的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
JQuery实现全选、全不选、反选功能
12-12
JQuery实现全选、全不选、反选功能 1、当点击'全选'按钮时，页面中所有的复选框都应该为选中状态， 1.1、当再次点击'全选'按钮时，所有的复选框应该是非选中状态。 1.2、当点击子复选框时，'全选'按钮应该是非选中状态。 2、当选中当前页面的所有子复选框时，'全选'按钮应该是'选中'状态。 3、点点击'全不选'按钮时，当前页面的所有复选框置为非选中状态。 4、当点击'反选'按钮时，当前页面选中状态的复选框置为未选中状态，未选中状态的复选框置为选中状态。
jquery 实现全选，全不选，反选，获取选中的值
12-19
对于“全选”、“全不选”和“反选”功能，jQuery 提供了简洁的解决方案，同时也可以方便地获取选中的元素值。以下我们将详细探讨如何使用 jQuery 实现这些功能。 1. **全选**： 全选功能通常应用于具有多选选项的...
JQuery radio 全选与反选
zhangxiao0122的博客
07-15 970
项目需要，参照网上提供的方法测试出正确方案，记录下方便使用 //全选 $("#checkall").click(function () { if (this.checked) { $("input[name='cball']").attr("checked", true); ...
JavaScript复选框（全选/全不选 反选）
丑小鸭
08-04 7238
实例代码： 1 JS代码： &lt;script type="text/javascript"&gt;    window.onload=function(){           function myClick(id,fun){          var btn=document.getElementById(id);          btn.onclick=fun;      }   ...
全选，反选，全不选
wywanwxn的博客
04-12 395
布局 xml version="1.0" encoding="utf-8"?> xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orien
js实现全选、全不选、反选、选中的值、必选中一个
流绪@微梦
11-12 6652
直接上代码 1.html代码 &amp;lt;input type=&quot;Checkbox&quot; onclick=&quot;checkAll(this)&quot; id=&quot;all&quot; /&amp;gt;全选 &amp;lt;input type=&quot;Checkbox&quot; onclick=&quot;checkAllNo()&quot; id=
js写全选按钮、全不选按钮、反选按钮、全选全不选复选框代码
热门推荐
且听风吟
09-01 2万+
今天主要给大家介绍下如何用js原生代码写出全选、全不选、反选按钮。代码如下： Document 你的呢爱好很广泛！！ 全选/全不选 足球 篮球 游泳 唱歌 // 处理全选 document.getElementById('checkall').onclick=function(){ /*********************
Arco Design for Vue 3 - 快速上手指南与实战技巧
最新发布
qq_42072014的博客
08-11 468
如果你在使用 TypeScript 时遇到了类型定义问题，确保你安装了正确的类型包，并且版本与 Arco Design 的版本相匹配。Arco Design for Vue 3 是一个非常强大的 UI 框架，它不仅提供了丰富的组件和功能，还有完善的文档和支持。通过本文，你已经掌握了如何快速上手 Arco Design，并学会了一些实用的技巧来提升你的开发效率。希望这些经验能帮助你在 Vue 3 的开发过程中更进一步！
html全选全不选反选
11-29
以下是HTML中实现全选、全不选和反选的代码示例： 1. 全选效果 ```html <!DOCTYPE html> <html> <head> <title>全选</title> <script type="text/javascript"> function selectAll(){ var checkboxes = document.getElementsByName("fruit"); for(var i=0; i<checkboxes.length; i++){ checkboxes[i].checked = true; } } </script> </head> <body> <h3>水果列表</h3> <form> <input type="checkbox" name="fruit" value="apple">苹果<br> <input type="checkbox" name="fruit" value="banana">香蕉<br> <input type="checkbox" name="fruit" value="orange">橙子<br> <input type="checkbox" name="fruit" value="pear">梨子<br> <input type="button" value="全选" onclick="selectAll()"> </form> </body> </html> ``` 2. 全不选效果 ```html <!DOCTYPE html> <html> <head> <title>全不选</title> <script type="text/javascript"> function unselectAll(){ var checkboxes = document.getElementsByName("fruit"); for(var i=0; i<checkboxes.length; i++){ checkboxes[i].checked = false; } } </script> </head> <body> <h3>水果列表</h3> <form> <input type="checkbox" name="fruit" value="apple">苹果<br> <input type="checkbox" name="fruit" value="banana">香蕉<br> <input type="checkbox" name="fruit" value="orange">橙子<br> <input type="checkbox" name="fruit" value="pear">梨子<br> <input type="button" value="全不选" onclick="unselectAll()"> </form> </body> </html> ``` 3. 反选效果 ```html <!DOCTYPE html> <html> <head> <title>反选</title> <script type="text/javascript"> function reverseSelect(){ var checkboxes = document.getElementsByName("fruit"); for(var i=0; i<checkboxes.length; i++){ checkboxes[i].checked = !checkboxes[i].checked; } } </script> </head> <body> <h3>水果列表</h3> <form> <input type="checkbox" name="fruit" value="apple">苹果<br> <input type="checkbox" name="fruit" value="banana">香蕉<br> <input type="checkbox" name="fruit" value="orange">橙子<br> <input type="checkbox" name="fruit" value="pear">梨子<br> <input type="button" value="反选" onclick="reverseSelect()"> </form> </body> </html> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值