多选框用法

最新推荐文章于 2024-01-31 16:21:47 发布
最新推荐文章于 2024-01-31 16:21:47 发布
阅读量542 收藏 1
点赞数 1

https://www.helloweba.net/demo/selectall/
演示地址
<script>  
$(function () {
    //全选或全不选
    $("#all").click(function(){   
        if(this.checked){   
            $("#list :checkbox").prop("checked", true);  
        }else{   
            $("#list :checkbox").prop("checked", false);
        }   
     }); 
    //全选  
    $("#selectAll").click(function () {
         $("#list :checkbox,#all").prop("checked", true);  
    });  
    //全不选
    $("#unSelect").click(function () {  
         $("#list :checkbox,#all").prop("checked", false);  
    });  
    //反选 
    $("#reverse").click(function () { 
         $("#list :checkbox").each(function () {  
              $(this).prop("checked", !$(this).prop("checked"));  
         });
         allchk();
    });
    
    //设置全选复选框
    $("#list :checkbox").click(function(){
        allchk();
    });
 
    //获取选中选项的值
    $("#getValue").click(function(){
        var valArr = new Array;
        $("#list :checkbox[checked]").each(function(i){
            valArr[i] = $(this).val();
        });
        var vals = valArr.join(',');
          alert(vals);
    });
}); 
function allchk(){
    var chknum = $("#list :checkbox").size();//选项总个数
    var chk = 0;
    $("#list :checkbox").each(function () {  
        if($(this).prop("checked")==true){
            chk++;
        }
    });
    if(chknum==chk){//全选
        $("#all").prop("checked",true);
    }else{//不全选
        $("#all").prop("checked",false);
    }
}
</script> 
</head>

<body>
<div id="header">
   <div id="logo"><h1><a href="http://www.helloweba.net" title="返回helloweba首页">helloweba</a></h1></div>
   <div class="demo_topad"><script src="/js/ad_js/demo_topad.js" type="text/javascript"></script></div>
</div>

<div id="main">
   <h2 class="top_title"><a href="http://www.helloweba.net/javascript/254.html">jQuery实现的全选、反选和不选功能</a></h2>
   <div class="demo">
           <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.不再犹豫</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">  
    </div>
 <br/><div class="ad_76090"><script src="/js/ad_js/bd_76090.js" type="text/javascript"></script></div><br/>
</div>

qq_25907831
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery多选框选择数量限制方法
12-11
由于刷新后，多选框会保留选中的，这时数量达到要求后还是可以选择的bug，在前面加个判断数量是否数量达到要求的处理就可以了。 <html> <head> <meta http-equiv="Content-Type" content="text/html...
HTML|按钮和多选框
Alan_Lowe
07-21 1万+
HTML|按钮和多选框 1.多选框 和单选框相比，就是将type属性从radio改成了checkbox，比如我们建立一个爱好的多项选择： 有睡觉，篮球，足球和编程： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>按钮和多选框</title> </head> <body> <!-- 多选框： ch
表单进阶 单选框 多选框
m0_70877859的博客
07-18 4749
textareaclass="aa"placeholder="请输入你的意见">aaa抽烟。喝酒。男。女。
【Element-ui】Checkbox 多选框 与 Input 输入框
m0_62599305的博客
12-02 2655
在现代Web应用程序的开发中，用户交互和界面设计至关重要。Element-ui为Vue.js提供了一套丰富的组件，其中包括Checkbox多选框和Input输入框。Checkbox多选框允许用户从多个选项中进行选择，而Input输入框则是用户输入文本的关键元素。本文将深入介绍这两个组件，探讨它们的用法和特性，以帮助开发人员更好地利用它们构建出直观、友好的用户界面。Checkbox 多选框：Element-ui的Checkbox多选框是一种灵活的选择控件，通过简单的配置，可以实现单个或多个选项的选择。通过与数
Js实战之多选框
weixin_44278828的博客
10-08 4856
关于多选框的一道小练习 题目要求： 1、点击全选框时，全部多选框（足球、篮球、羽毛球、乒乓球）选中，全选/全不选框选中； 2、点击全不选框时，全部多选框不选中，全选/全不选框不选中； 3、点击反选框时，选中的多选框变为不选中，同时不选中的多选框变为选中，如果全部多选框处于选中状态，那么全选/全不选框选中，反之则不选中； 4、点击提交框，将会显示选中的多选框信息； 5、点击全选/全不选框时，选中则全部多选框选中；不选中，则全部多选框不选中。同时，如果全部多选框处于选中状态时，全选/全不选框也将处于选中状态，
js 实现多选框
gfh
04-22 6561
要求1：点击全选实现多选框的全部选中，再次点击全选，将所有多选框取消选中①要求2：点击任何4个选项的时候，如果4个多选框全部都选中，则【全选】这个多选框要选中，否则，【全选】这个多选框不要选中，如下图、&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;&l..
javascript中DOM复选框选择用法实例
10-24
主要介绍了javascript中DOM复选框选择用法,实例分析了javascript操作复选框实现全选与反选的相关技巧,需要的朋友可以参考下
基于QT+C++实现的带动画效果的多选框QCheckBox+源码
最新发布
05-02
基于QT+C++实现的带动画效果的多选框QCheckBox+源码 基于QT+C++实现的带动画效果的多选框QCheckBox+源码 基于QT+C++实现的带动画效果的多选框QCheckBox+源码 基于QT+C++实现的带动画效果的多选框QCheckBox+源码 ...
jQuery模拟html下拉多选框的原生实现方法示例
10-16
主要介绍了jQuery模拟html下拉多选框的原生实现方法,结合完整实例形式分析了jQuery动态操作页面元素实现select下拉框效果的相关操作技巧,需要的朋友可以参考下
ExtJS 下拉多选框lovcombo
12-08
开始以为很简单，在option里加个input... 下拉多选框的使用过程中处理比较多的逻辑主要集中在数据源store的配置和select事件的处理。extjs本身的那种数据和UI分离的模式使得级联的实现非常轻松。只需在省份下拉框的sele
Vue3多选框（Checkbox）
Mr Dear的博客
03-29 6973
整体样式功能与ant design保持一致的多选框组件，用于在一组可选项中进行多项选择。
html多选框_HTML（常用标签表）
weixin_39912163的博客
12-01 2289
以下内容均以本人理解的方式书写，如有不妥，欢迎指正。1描述：块级元素，主要用于布置页面布局。常用属性：无常用。2描述：块级元素，用于文章标题，无法单独使用，需要跟一个1~6的数字表示标题大小。常用属性：无常用。3描述：块级元素，一般用于文本内容。常用属性：无常用。4描述：内联元素，单标签，一般用于表单，如输入框、单选框、多选框以及提交按钮。常用属性：typ...
HTML 多选框
Yan 小铁匠
07-29 2万+
代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>多选框</title> </head> <body> <form action=""> 爱好：<input type="checkbox" name=...
ElementUI Form：Checkbox 多选框
ChinaDragon10的博客
01-31 1178
ElementUI Form：Checkbox 多选框
小记1：多选框的使用
weixin_43135489的博客
09-10 177
适用于多个勾选框绑定到同一个数组的情景，通过是否勾选来表示这一组选项中选中的项。checkedItems: [],//里面放多个对象 一个用户可选多个。与数组中的元素值相对应，如果存在指定的值则为选中状态，否则为不选中。//对象：存用户userId 和模块的sectorId。sectorId: [], //存选中的index。sysDic.sector.dicList：数字字典。checkedItems：Array 收集选中项。
多选框的应用
qq_45944328的博客
07-06 110
多选框的应用
漂亮的checkbox样式 （多选框）
热门推荐
阳光灿烂的日子
08-07 6万+
说起来汗颜，如此常用的checkbox我改变样式，居然需要百度，而且百度很久，更可气的是百度很久找不到可行的解决方案。 后来在csscheckbox.com上找到很多样式，结果一测兼容性IE不行。如此一来，耽误了很久的时间。 抄了近道屡试不行，回归JQuery UI，不用说兼容性挺好，而且样式自己随心画。 在此记录一款checkbox的样式，供大家也供我以后方便使用。 有三种状态，de
Checkbox 多选框
weixin_40030173的博客
11-15 778
<el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">全选</el-checkbox> <div style="margin: 15px 0;" /> <el-checkbox-group v-model="checke...
Element el-check 多选框详解
程序员大阳
01-30 4864
1. 用途 多选框用来从备选的选项中选择任意多个，0个或者全部均可。 注意选择器(下拉选择框)也支持多选，相比与选择器，多选框的选项是全部显示在界面上的，而选择器需要点击下拉按钮才能显示全部选项。 2. 普通多选框 普通多选框v-model绑定一个变量，变量的值为true/false分别对应选中/未选中，示例如下： HTML代码： 普通多选框： <el-checkbox v-model="checkedBasketball">篮球</el-checkbox>
el-checkbox多选框用法
08-31
综上所述，el-checkbox多选框的用法包括引入Element UI库、定义数组存储选中值、使用el-checkbox-group和v-for指令渲染选项、实现数据的双向绑定，并可通过数组获取选中值。希望这些信息对您有帮助。...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值