js实现复选框的反选

最新推荐文章于 2023-08-15 20:48:01 发布
最新推荐文章于 2023-08-15 20:48:01 发布
阅读量424 收藏
点赞数
分类专栏： 学习笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fyangfei/article/details/112313907
版权 
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Bootstrap 实例 - 悬停表格</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>


<div class="row">
    <div class="col-xs-2 col-sm-2">.col-xs-6 .col-sm-4</div>
    <div class="col-xs-8 col-sm-8">

        <table class="table table-hover" >
            <caption>悬停表格布局</caption>
            <thead>
            <tr>
                <th class="" style="padding-right: 0px"><input
                        id="selall" type="checkbox" class="icheckbox_square-blue">
                </th>
                <th>ID</th>
                <th>用户名</th>
                <th>邮箱</th>
                <th>联系电话</th>
                <th>具有的角色</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody id="boxx">

            <c:forEach items="${userList}" var="user">

            <tr>
                <td><input class="box" type="checkbox"></td>
                <td>${user.id}</td>
                <td>${user.username}</td>
                <td>${user.email}</td>
                <td>${user.phoneNum}</td>
                <td>***</td>
                <td class="text-center">
                    <a href="javascript:void(0);" onclick="delUser('${user.id}')" class="btn bg-olive btn-xs">删除</a>
                    <a href="javascript:void(0);"  class="btn bg-olive btn-xs">修改</a>
                </td>

            </tr>
            </c:forEach>

            </tbody>
        </table>



    </div>
    <div class="col-xs-2 col-sm-2">.col-xs-6 .col-sm-4</div>
</div>


<script>
    var boxx = document.getElementById('boxx');
    var oinput = boxx.getElementsByTagName('input');
    $(document)
        .ready(
            function() {
                // 全选操作
                $("#selall")
                    .click(
                        function() {
                                for(var i=0;i<oinput.length;i++){
                                     if(oinput[i].checked==false)
                                     {
                                         oinput[i].checked=true;
                                     }else{
                                         oinput[i].checked=false;
                                     }
                                }
                            
                        });
            });
</script>


<%--<c:forEach items="${userList}" var="user">--%>
<%--    <tr>--%>
<%--        <td><input name="ids" type="checkbox"></td>--%>
<%--        <td>${user.id}</td>--%>
<%--        <td>${user.username}</td>--%>
<%--        <td>${user.email}</td>--%>
<%--        <td>${user.phoneNum}</td>--%>
<%--        <td class="text-center">--%>
<%--            <c:forEach items="${user.roles}" var="role">--%>
<%--                &nbsp;&nbsp;${role.roleName}--%>
<%--            </c:forEach>--%>
<%--        </td>--%>
<%--        <td class="text-center">--%>
<%--            <a href="javascript:void(0);" onclick="delUser('${user.id}')" class="btn bg-olive btn-xs">删除</a>--%>
<%--        </td>--%>
<%--    </tr>--%>
<%--</c:forEach>--%>


</body>
</html>

 

FYANGFEI
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript实现复选框全选或反选
12-10
以下是用原生js实现的复选框全选/反选的实现，选中checkbox的时候，实现全选的效果，并且样式发生改变。 代码最简洁，js行为优化版，复制粘贴即可使用。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>复选框全选/反选效果实现</title> <style> body,dl,dt,dd,p{margin:0;padding:0;} body{font-family:Tahoma;font-size:12px;} label,input,a{vertical-align:mi
Js实现表格全选，反选，全不选，第一个复选框全选或全不选，移入变色
weixin_53106424的博客
01-19 415
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .over{ background-color:deeppink; } .out{ background-color:wh
js复选框之全选&&反选&&不选
不忘的博客
05-29 847
js代码： function allSelect(){ var res = document.getElementsByName("aihao"); for(var i=0; i< res.length;i++){ res[i].checked = true; } } function reSelect(){ var res = document.getElementsByName("aihao"); for(var i=0;i&l
利用js实现全选反选复选框
weixin_39288299的博客
04-17 410
实现效果 思路 获取元素（全选按钮和复选框） 注册点击事件 分两个js模块 全选按钮控制复选框（设置复选框等于全选按钮的this.checked即可实现） 复选框控制全选按钮（每次点击事件，循环检测每个复选框，若有任何一项没选中，将flag设置为false并跳出循环） 代码 <!DOCTYPE html> <html lang="en"> <head&g...
javaScript实现复选框全选反选事件详解
10-19
主要为大家详细介绍了javaScript实现复选框全选反选事件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Js实现复选框的全选、全不选反选功能代码实例
10-15
主要介绍了Js实现复选框的全选、全不选和反选,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
js实现复选框的全选和反选功能
MRSLLLL_的博客
06-02 2775
一共需要实现两个功能，第一个是，当thead中的复选框选中☑️时，tbody中的复选框都选中checked，反之，都不选中；第二个是，当tbody中的复选框都选中时，thead中的复选框选中；当tbody中的复选框有一个没选中，thead中的复选框不选中。 <!DOCTYPE html> <html lang="en"> <head> <met...
使用js实现多选框的全选、反选、以及子多选框影响全选框的勾选
dataclear的博客
04-29 727
使用js实现多选框的全选、反选、以及子多选框影响全选框的勾选 废话少说，直接上代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="../js/jquery-3.3.1.js">&lt...
js实现复选框全选、反选、取消功能
lyq0011的博客
08-26 4677
1、获取全选按钮对象。2、全选按钮触发时候，让input复选框遍历所有对象。3、全选：checked属性值设为true。反选：checked属性值取反！。取消：checked属性值设为false
js 实现 复选框的反选
03-31
js 实现 复选框的反选! 值得下载看看!资源免费,大家分享!!
demo3 表单全选 、全消 实现
lryh_的博客
01-29 303
全选 反选
原生js实现复选框（全选/全不选/反选）效果【含完整代码】
热门推荐
qq_40261601的博客
02-21 1万+
1、勾选后，可以获取到所勾选的值组成的数组，并展示到页面； 2、全部勾选，以及取消勾选时，要相应地更新全选框的状态及文字显示； 3、点击反选，将所有选项的选择状态置换，并相应改变全选框的状态；定义一个数组checkValues，存放用户所勾选的内容。 再定义一个函数，遍历选框数组checks，如果选框checks[i]被选择，则将value加入数组。遍历完成后，使用属性将数组展示到页面中。 捕获选框的点击事件，当用户点击时，执行。 2、更新全选框状态及文字显示 定义一个判断是否全选的函数，遍历选框数组
复选框的全选与反选功能
m0_75250529的博客
08-15 100
input type="button" id="i5" >全选。<input type="button" id="i6" >反选。
js实现复选框的全选，反选功能
最新发布
qq_64790872的博客
08-15 374
input type="checkbox" name=""id="selAll">全选。<input type="checkbox" name=""id="fx">反选。// 所有复选框被选中时，全选点亮。// 被选的复选框长度。
Checkbox全选反选
weixin_43332393的博客
09-27 1106
</tbody> </table> </div> <script> // 1. 全选和取消全选做法： 让下面所有复选框的checked属性（选中状态） 跟随 全选按钮即可 // 获取元素 var j_cbAll = document.getElementById('j_cbAll'); // 全选按钮 var j_tbs = documen...
复选框的全选、全不选和反选
weixin_57762552的博客
04-19 4020
如图： 整个页面内容非常少只有五个复选框和三个按钮，如果嫌复选框少的话可以自己手动增加。 HTML内容如下图，但要注意一点就是输入框的tyep属性的属性值一定要是checkbox，因为checkbox就是复选框的意思，在HTML里也是复选框，所以tyep的值一定要是checkbox，要不然它就不是一个复选框。 接下来就是本篇文章的重点，JavaScript部分。 按照惯例首先要获取到所有...
JS实现一组复选框的全选，全不选，和反选
Java学习博客
08-27 1697
对于复选框的全选，全不选和反选的实现，首先先获得一组复选框的操作权，然后对这组复选框的checked属性进行判断。点击全不选时，将所有的复选框的checked属性设置为false。点击反选按钮时，判断当前复选框的checked属性，true改为false，false改为true。本来对于复选框的checked值，打算使用attr设置属性的方法给所有的复选框设置选中和非选中效果。结果，发现出现的情况是，只有第一次的全选和全不选效果。上网查了资料才发现，attr方法对于不同的浏览器，表现形式不一样。...
js实现复选框全选反选
04-09
可以使用以下Javascript代码实现复选框全选反选： 全选： ``` function selectAll(){ var checkboxes = document.getElementsByName("checkbox"); for(var i=0;i;i++){ checkboxes[i].checked = true; } } ``` ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值