Checkbox 单选 全选 反选

最新推荐文章于 2023-07-07 19:18:26 发布
最新推荐文章于 2023-07-07 19:18:26 发布
阅读量212 收藏 1
点赞数 1
分类专栏： Javascript 文章标签： html javascript jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fy809178958/article/details/103034831
版权 
<html>
<head>
<script src="自己找个jquery引用下" type="text/javascript"></script></head>
<body>

<table class="table  table-hover table-condensed" border="0" cellpadding="0" cellspacing="0">

            <tbody>

                                <tr>
                                    <td style="font-size:14px;">
                                        <strong>情绪表现</strong><input type="checkbox" name='checkparent' value="1" style="margin-left:20px;"><label style="color:#169bd5;font-weight:500;">全选</label>
                                    </td>


                                </tr>
                                <tr>
                                            <td>
                                                <input type="checkbox" name="checkchild" value="2"> 焦虑
                                            </td>
                                            <td>
                                                <input type="checkbox" name="checkchild" value="3"> 烦躁
                                            </td>
                                            <td>
                                                <input type="checkbox" name="checkchild" value="4"> 自卑
                                            </td>
                                </tr>



                                <tr>
                                    <td style="font-size:14px;">
                                        <strong>适用年级</strong><input type="checkbox" name='checkparent' value="12" style="margin-left:20px;"><label style="color:#169bd5;font-weight:500;">全选</label>
                                    </td>


                                </tr>
                                <tr>
                                            <td>
                                                <input type="checkbox" name="checkchild" value="16"> 新高一
                                            </td>
                                            <td>
                                                <input type="checkbox" name="checkchild" value="17"> 高一
                                            </td>
                                            <td>
                                                <input type="checkbox" name="checkchild" value="19"> 高二
                                            </td>
                                            <td>
                                                <input type="checkbox" name="checkchild" value="20"> 高三
                                            </td>
                                </tr>



                                <tr>
                                    <td style="font-size:14px;">
                                        <strong>主播小编</strong><input type="checkbox" name='checkparent' value="21" style="margin-left:20px;"><label style="color:#169bd5;font-weight:500;">全选</label>
                                    </td>


                                </tr>
                                <tr>
                                            <td>
                                                <input type="checkbox" name="checkchild" value="22"> 呆子姐姐
                                            </td>
                                            <td>
                                                <input type="checkbox" name="checkchild" value="23"> 小然姐
                                            </td>
                                </tr>


            </tbody>
        </table>
</body>
</html>
<script type="text/javascript">
            $(function () {
                //$(':checkbox').click(function () {
                //    //判断当前是否选中
                //    if (this.checked) {
                //        console.log(this.getAttribute("name"));
                //        console.log(this.value);
                //    }
                //    var allcheckedvalue = $(':checkbox:checked').map(function () { return this.value }).get().join('\n');//所有选中的
                //    alert(allcheckedvalue);
                //})

                //function selectAll() {
                //    for (var i = 0; i < inputs.length; i++) {
                //        inputs[i].checked = true;
                //    }
                //}
                //function unSelectAll() {
                //    for (var i = 0; i < inputs.length; i++) {
                //        inputs[i].checked = false;
                //    }
                //}


                 //$(':checkbox').click(function () {
                //    //判断当前是否选中
                //    if (this.checked) {
                //        console.log(this.getAttribute("name"));
                //        console.log(this.value);
                //    }
                //    var allcheckedvalue = $(':checkbox:checked').map(function () { return this.value }).get().join('\n');//所有选中的
                //    alert(allcheckedvalue);
                //})

                var $checkparent = $("input[name='checkparent']");
                $checkparent.click(function () {
                    // $('input[name="checkchild"]').attr("checked", this.checked);
                    //checkparent.next('tr').find('input[name = "checkchild"']).attr("checked", this.checked);
                    //checkparent.next('input').attr("checked", this.checked);

                    //$(":input[name='checkchild']").attr("checked", this.checked);
                    //$("input[name='checkparent']").children('input[name = "checkchild"').attr("checked", this.checked);

                    var element = $(this).parents('tr').next('tr').find('input[name="checkchild"]'),
                        checked = $(this).prop("checked");

                    if (checked) {
                        element.prop("checked", checked);
                    } else {
                        element.prop("checked", checked);
                    }

                });
            })
        </script>

 

樱Cherry桃
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
checkbox全选与反选
azureternite的专栏
07-27 665
用原生JavaScript与JQuery实现checkbox的全选与反选
checkbox全选 反选的实现方式
weixin_45786785的博客
11-21 320
1.创建一个checkbox 按钮 2.需要被选中的checkbox <input type=“checkbox” name=“infoGUID” value="${rowData.infoGUID}" 实现方法： 全选，反选 $("#chkall").change(function() { $(“input[name=‘infoGUID’]”).prop(“checked”, $(t...
html上下左右键盘事件,键盘事件.html
weixin_42361834的博客
06-01 396
按Enter键切换用户姓名：电子邮箱：手机号码：个人描述：var inputs = document.getElementsByTagName('input');for (var i = 0; i < inputs.length; ++i) {inputs[i].onkeydown = function(e) {// 获取事件对象的兼容处理var e = event || window.ev...
多选框的全选、全不选、反选
weixin_33676492的博客
04-12 284
为什么80%的码农都做不了架构师？>>> ...
JavaScript 实现全选、单选和反选
最新发布
m0_71966801的博客
07-07 934
接着，使用一个循环为每个选项复选框添加 change 事件监听器，当任意一个选项复选框的状态发生变化时，判断是否所有选项复选框都被选中，如果是，则将全选复选框的状态设为选中；如果不是，则将全选复选框的状态设为未选中。在 JavaScript 部分，我们首先获取到全选复选框和选项复选框的引用。然后，为全选复选框添加一个 change 事件监听器，当选择状态发生变化时，将其状态应用到所有选项复选框上。的函数来实现反选的功能。然后，再次判断是否所有选项复选框都被选中，并根据结果设置全选复选框的状态。
全选 单选和反选的实现
等，你的到来。
12-15 3629
大家早上好，新的一天又开始咯，继续学习啊，其实最近我发现了一张图特别好玩，如下： 哈哈，就是这张，但是我想说的是，革命尚未成功啊，还得继续修炼啊，好了，闲篇扯到这里，我们今天先来看一下，风靡各大电商网站用来赚钱的小对勾啊—–看看，全选单选和反选的使用。 我们先来写一个代码的结构，如下：<ul> <li> <input type="checkbox" c
JS实现单选，全选，反选，案例
weixin_41346436的博客
06-03 1227
单选框列表选择，全选，全不选，反选，这个典型案例在起初的时候面试中很容易被问到，此处做下总结，原生JS的实现方式，可能原生JS实现的有点繁琐，如有好的建议，多多指教，谢谢！ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>单选和反选</title> </head> <body> <form action="" meth
Android RecycleView使用（CheckBox全选、反选、单选）
01-05
本文实例为大家分享了CheckBox全选、反选、单选的具体代码，供大家参考，具体内容如下 MainActiivity package com.bwie.day06; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; ...
C#_WinForm_dataGridView_全选_反选_单选_导出
03-11
C#的WinForm项目的dataGridView控件的CheckBox的全选、全不选、反选、单选、导出全部、仅导出已选择的项目到Excel的功能。简单明了，一看就懂。 我的腾讯微博：http://t.qq.com/djk8888
checkbox样式美化及全选反选插件
06-01
在IT行业中，前端开发往往需要关注用户体验和界面美观，而"checkbox样式美化及全选反选插件"正是为了满足这一需求。复选框（checkbox）和单选框（radio button）是网页交互中常见的元素，它们用于收集用户的选择信息...
checkbox全选、反选、单选（前端）
01-26
复选框一级类别和二级类别，一级类别有全选和反选，二级类别单选（如果二级类别所有复选框为false，则一级类别复选框为false）
复选框 实现 单选 全选
01-16
复选框 实现 单选 多选 全选的功能
ElementUI el-checkbox实现全选反选单选
shykevin的博客
06-22 3715
一、概述 先来看一下效果图 需求： 1. 每一种类型，可以全选，反选(一个都不选)，单选(仅选一个或者多个) 2. 保存时，至少有一种类型，选择1个或多个。不能都不选，直接提交空表单。 3. 保存时，提交参数都是id，不能出现中文。 初始页面数据如下： [{ "groupId": 1, "groupName": "运动", "checkAll": false, ...
Checkbox全选反选
weixin_43332393的博客
09-27 1124
</tbody> </table> </div> <script> // 1. 全选和取消全选做法： 让下面所有复选框的checked属性（选中状态） 跟随 全选按钮即可 // 获取元素 var j_cbAll = document.getElementById('j_cbAll'); // 全选按钮 var j_tbs = documen...
JS实现单选、全选、反选
itHeima_Liu的博客
05-21 1450
JS实现单选、全选、反选 使用JS的基础知识，实现选择框的单选、全选、反选功能，是一个很实用的小知识。 全选反选单选 请选择你爱好: type="checkbox" name="hobby" id="hobby1"> 音乐 type="c
全选 单选 反选
weixin_46030044的博客
02-27 132
html `全选 反选 单选 单选 单选 `
单选框实现全选反选
qq_36119607的博客
11-23 498
activity代码： import android.os.Bundle; import android.support.v7.app.AppCompatActivity; import android.view.View; import android.widget.Button; import android.widget.ListView; import android.wi
JS实现单选、多选、全选、反选
热门推荐
胖大星的博客
08-17 1万+
HTML <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>全选反选问题</title> <script type="text/javascript" src="jquery-1.4
JS实现单选，多选，全选，反选，全不选
u014601106的专栏
07-13 2813
//单选 function deleteFee(id){ if(confirm("确定删除吗？")){ location.href="deleteCost?id="+id; } //多选 function check(){ var oj = document.getElementsByName(
Android Recyclerview+checkbox全选反选
03-14
这个问题可以回答。你可以使用一个全选的checkbox来控制所有子checkbox的选中状态，当全选checkbox被选中时，遍历所有子checkbox并将它们的选中状态...对于反选，你可以遍历所有子checkbox，将它们的选中状态取反即可。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值