通过document.getElementsByName来实现 复选框的全选，全部选，反选

最新推荐文章于 2022-10-26 14:17:31 发布
最新推荐文章于 2022-10-26 14:17:31 发布
阅读量2.1k 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xx123698/article/details/47165331
版权
<%--
    Document   : test
    Created on : Jul 30, 2015, 11:13:08 AM
    Author     : root
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title> Test </title>
        <style>
            .body{
                background-color: graytext;
                width: 100%;
                height: 100%;
            }
        </style>
        <script>
            function allSelect(){
             //document.getElementByName("checkbox").attr("checked",'true');
              for(i=0;i<document.getElementsByName("checkbox").length;i++)
                 {
                 document.getElementsByName("checkbox")[i].checked = "checked";
                }
            }
            function noSelect(){
                 for(i=0;i<document.getElementsByName("checkbox").length;i++)
                 {
                 document.getElementsByName("checkbox")[i].checked = false;
                }
                }
                function fanSelect() {

                    for (i = 0; i < document.getElementsByName("checkbox").length; i++)
                    {
                        if (document.getElementsByName("checkbox")[i].checked == false)
                        {
                            document.getElementsByName("checkbox")[i].checked = "checked";
                        }
                        else
                            document.getElementsByName("checkbox")[i].checked = false;
                    }
                }
        </script>
    </head>
    <body class="body">
<input type="checkbox" name="checkbox"/>
<input type="checkbox" name="checkbox"/>
<input type="checkbox" name="checkbox"/>
<input type="checkbox" name="checkbox"/>
<input type="checkbox" name="checkbox"/>
                    <input style="" type="button" value="全选" οnclick="allSelect()"></input>
                     <input style="" type="button" value="全bu选" οnclick="noSelect()"></input>
                     <input style="" type="button" value="fan选" οnclick="fanSelect()"></input>
    </body>
   
</html>

刘翔UP
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现全选_javascript之document.getElementsByName实现复选框全选和全不选
weixin_35618325的博客
01-14 318
html代码<body> 全选<input type="checkbox" id="all" onclick="checkAll()"/><br/> <input type="checkbox" name="a" /> <input type="checkbox" name="a" /> <input type="checkbox"...
使用getElementsByName实现多选，反选，全选
defined_的博客
07-03 178
代码如下： <html> <head> <scripttype="text/javascript"> functioncheckAll(){ varhobbies=document.getElementsByName("hobby"); for(vari=0;i<3;i++){ hobbies...
不通过getElementByName实现获取表单数据 (document.form表单的name值.input输入框的name值)...
A458545418的博客
06-25 313
function update() { //document.form表单的name值.input输入框的name值 var username = document.form1.username; var mobile = document.form1.mobile; var qq = document.form1.qq; ...
复选框全选与全不选操作实现思路
09-05
本文将详细解析如何使用JavaScript实现复选框的全选与全不选操作。 首先，我们需要创建HTML结构，包含一个用于全选/全不选的主复选框（checkItem）和多个可选的复选框（item）。以下是一个简单的HTML示例： ```...
JQuery复选框全选效果如何实现
11-21
如何获取所有复选框：document.getElementsByName、 需求分析 ​ 在我们对表格处理的时,有些情况下,我们需要对表格进行批量处理 技术分析 第一种方法：选择器[属性名称=’属性值’] $(“input[type=’checkbox’]:...
简单js实现全选全部选反选效果
11-11
复选框允许用户对多个选项进行选择，其状态可以通过`checked`属性来控制。例如： ```html <input type="checkbox" id="selectAll"> 全选 <input type="checkbox" name="option" value="1"> 选项1 ...
通过js来制作复选框的全选和不选效果
12-07
在网页开发中，有时我们需要实现一个功能，让用户可以一键全选或取消选中页面上的所有复选框。这个功能在处理大量数据时尤其有用，比如在电商网站的商品列表中。本示例通过JavaScript来实现这一功能，让我们一起深入...
javaweb---------------document常见方法 document.getelementsbyname和document.getelementsbytagname
tutou_girl的博客
01-16 349
document.getelementsbyname document.getelementsbytagname
使用document方法完成全选、全不选和反选
jq1223的博客
01-11 319
//全选的方法 function qx(){ //获取所有的复选框 var plsc = document.getElementsByName("plsc"); //循环将每个复选框的选中状态改为true for(var i = 0; i < plsc.length; i++){ plsc[i].checked = true; } } //全不选的方法 function qbx(){ //获取所有的复选框 var plsc = document.getEl
document.getElementsByName() 、document.getElementById() 、document.getElementsByTagName() 区别
Hurricane_m的博客
05-16 1573
document.getElementsByName() 是根据控件名称获取这个控件对象，因为控件名称可以相同，返回的是一个对象数组。 document.getElementById() 是根据控件ID获取这个控件对象，因为控件ID唯一，返回的是一个对象。 document.getElementsByTagName() 是根据控件TAG获取这个控件对象，返回的是一个对象数组。...
JS中：关于form中的Checkbox的操作： document.getElementsByName("name")，如何取消选中状态，如何将文本框内容清空
JMission的专栏
12-19 5889
通过var aa = document.getElementsByName("name")获得的对象是NodeList，不能直接调用aa.value或者aa.checked等其他checkbox的属性，这样会出现undefined的错误。因为每个checkbox的name属性是相同的，所以得到的是一组checkbox标签对象。正确方法是使用for循环遍历每一个标签。 代码举例（功能是取消每个ch
获取已选中的复选框checked-box的值
Leader_yuxi的博客
10-26 177
封装一个获取已选中的复选框checked-box的值并拼接成带分割符的字符串形式。
getElementsByName，实现多选的全选与全不选功能
HWP
03-16 602
利用， getElementsByName获得想要操作的对象。返回值是可读可写的。 因此， 修改为全选代码： function checkall() { var alls = document.getElementsByName("hobby"); // alert(alls) // alert(alls.length) ...
关于document.getElementsByName()问题的解决
wangxinqn的专栏
11-05 1488
IE的新版本（6.0 and 7.0以前的版本没有测试）好像有bug。当你使用document.getElementsByName()这个方法的时候好像是无效的，并不能得到一个应有的数组。幸运的是document.getElementsByTagName(tag)是有效的 所以如果需要用到这个方法的时候只有自己来写一个:      function getMyElementsByName(tag ...
getElementsByName方法、getElementsByTagName方法、document对象三个查询方法的使用注意事项、dom对象查询练习、document对象补充说明
热门推荐
weixin_46065214的博客
08-17 1万+
getElementsByName方法、getElementsByTagName方法、document对象三个查询方法的使用注意事项、dom对象查询练习、document对象补充说明
GetElementByName
我就吃一口的BLOG
12-10 960
GetElementByName <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> // 全选 function checkAll() { // 让所有复选框都选
js实现复选框全选反选
最新发布
04-09
可以使用以下Javascript代码实现复选框全选反选： 全选： ``` function selectAll(){ var checkboxes = document.getElementsByName("checkbox"); for(var i=0;i<checkboxes.length;i++){ checkboxes[i].checked...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值