使用js实现多选框

最新推荐文章于 2023-08-09 08:22:21 发布
最新推荐文章于 2023-08-09 08:22:21 发布
阅读量607 收藏 1
点赞数 1
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46577631/article/details/107109000
版权 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多选框</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        ul {
            list-style: none;
            display: flex;
        }
    </style>
</head>

<body>
    <form action="">
        <ul>
            <li>
                西瓜<input type="checkbox">
            </li>
            <li>
                苹果<input type="checkbox">
            </li>
            <li>
                葡萄<input type="checkbox">
            </li>
            <li>
                榴莲<input type="checkbox">
            </li>
        </ul>
        <input type="button" value="全选" id="all_btn">
        <input type="button" value="全不选" id="notall_btn">
        <input type="button" value="反选" id="invert">
    </form>
    <script>
        let all_btn = document.getElementById("all_btn");
        let notall_btn = document.getElementById("notall_btn");
        let invert = document.getElementById("invert");
        let check = document.querySelectorAll(`input[type="checkbox"]`);
        all_btn.onclick = function () {
            check.forEach((item) => {
                item.checked = true;
            })
        };
        notall_btn.onclick = function () {
            check.forEach((item) => {
                item.checked = false;
            })
        };
        invert.onclick = function () {
            check.forEach((item) => {
                // item.checked ? item.checked = true : item.checked = false;
                item.checked=!item.checked;
            })
        };
    </script>
</body>

</html>
代码De搬运工
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
js 实现多选框
gfh
04-22 6608
要求1：点击全选实现多选框的全部选中，再次点击全选，将所有多选框取消选中①要求2：点击任何4个选项的时候，如果4个多选框全部都选中，则【全选】这个多选框要选中，否则，【全选】这个多选框不要选中，如下图、&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;&l..
js 多选框
你随风飘扬的笑
04-10 345
js实现多选框的全选 <form action="" method="post"> <input type="checkbox" id="first" /><br> <input type="checkbox" name="aihao" value="唱歌" />唱歌 <br> <input type="che...
JS实现多选框的操作
12-28
本文实例为大家分享了JS实现多选框的具体代码，供大家参考，具体内容如下 多选时： 全选时： 反选时： html代码 <div class=container> <h3>请选择你最喜欢吃的水果（多选）</h3> <ul> <li><input type=checkbox>苹果</li> <li><input type=checkbox>雪梨</li> <li><input type=checkbox>西瓜</li> <li><input type=checkbox>哈密瓜</li> <li><input type=checkbox>荔枝<
动态表格-JavaScript
weixin_43157935的博客
03-03 207
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格全选</title> <style> table{ border: 1px solid; ...
多选框练习--js实现
qq_44604924的博客
08-14 290
描述：进行多选框的练习，进行全选，全不选，反选，点击发送时打印出所选的信息。具体页面如下 实现： 1.进行全选，全选的同时，最上面的全选全不选也要选上，即代码中的checkallBox，代码如下： 2.全不选，最上面的全选全不选的checked要为false，代码如下： 3.反选（遍历所有checkbox,将他们的checked值取反），如果之前是全选或全不选状态时，进行反选时也要对最上面的全选全不选状态进行判断，代码如下： 4.点击发送按钮时，弹出所选框的值，代码如下： 5.当点击最上面的全选全
Js实战之多选框
weixin_44278828的博客
10-08 4936
关于多选框的一道小练习 题目要求： 1、点击全选框时，全部多选框（足球、篮球、羽毛球、乒乓球）选中，全选/全不选框选中； 2、点击全不选框时，全部多选框不选中，全选/全不选框不选中； 3、点击反选框时，选中的多选框变为不选中，同时不选中的多选框变为选中，如果全部多选框处于选中状态，那么全选/全不选框选中，反之则不选中； 4、点击提交框，将会显示选中的多选框信息； 5、点击全选/全不选框时，选中则全部多选框选中；不选中，则全部多选框不选中。同时，如果全部多选框处于选中状态时，全选/全不选框也将处于选中状态，
用原生JS实现简单的多选框功能
10-19
总之，这个例子展示了如何使用原生JavaScript实现多选框的全选和反选功能，对于初学者来说是一个很好的实践案例，有助于理解DOM操作和事件处理。通过进一步学习和实践，你可以创建更复杂、更健壮的多选框功能。
JS面向对象之多选框实现
10-15
主要为大家详细介绍了JS面向对象之多选框实现，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Js自定义多选框效果的实例代码
10-19
本文将深入探讨如何使用JavaScript实现自定义多选框的效果，这对于提升用户体验和美化网页界面至关重要。 首先，我们需要理解HTML结构。在提供的代码中，可以看到一个ID为`selexWps`的`div`元素，它包含了多个子`...
JS多选下拉框_实现多项选择
11-19
JS多选下拉框，实现多选。点击显示下拉。
js控制多选框
01-22
实现动态多选交互,单击全选触发选中或者取消选中的事件。
js 实现 复选框全选（一）
03-31
js 实现 复选框全选（一）! 值得下载看看!资源免费,大家分享!!
JS处理多选框
TAOSST的Blog
10-20 8645
JS处理多选框html>head>meta http-equiv="Content-Type" content="text/html; charset=gb2312" />title>JS处理多选框title>script type="text/javascript">  function test(){     var tree=document.getE
js多选选框和单选框案例
最新发布
m0_71426498的博客
08-09 266
多选框和单选框
JS处理多选框[--图--]
TAOSST的Blog
10-20 298
JS处理多选框 &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=gb2312" /&gt; &lt;title&gt;JS处理多选框&lt;/title&gt; &lt;script type="text/javascript"&
JS多选框批处理
qq_38949960的博客
04-09 344
html代码 <thead> <tr> <td><input type="checkbox" id="allprintManage" name="allprintManage" />序号</td> </tr> </thead> <tbody> <tr><td><i...
jsDOM---多选框练习
m4587的博客
08-24 497
多选框实现以下功能 全选按钮，点击全选按钮选中全部多选框， 全不选按钮，点击全不选按钮将所有选中状态的多选框取消选中 反选按钮，点击反选按钮将选中状态的多选框反选 提交按钮，点击提交按钮提交后将所有选中状态的多选框的value属性弹出 全选或全不选多选框，若所有多选框都为选中状态，则该多选框状态也为选中；若有一个多选框选中状态为false，则该多选框的状态也为false
js多选框全选
小麦先生
07-10 2944
代码  应该可以加个form表单，提交的服务器的数据input的多选框value值是使用“，”隔开的字符串 function ChooseAll(sel, check) {     var objtb = document.getElementById(sel);     var num = objtb.getElementsByTagName("input");     var c
JS实现多选框并和后端交互
05-31
实现多选框的方法很简单，可以使用HTML中的<input>标签来实现。多选框需要使用type属性为checkbox，同时给每个多选框设置一个value属性作为其值，如下所示： ``` <input type="checkbox" name="fruit" value="apple">苹果 <input type="checkbox" name="fruit" value="banana">香蕉 <input type="checkbox" name="fruit" value="orange">橘子 ``` 在这里，name属性为“fruit”，表示这些多选框属于同一组，用户在选择时只能选择其中的一个或多个。value属性分别为“apple”、“banana”、“orange”，表示每个多选框的值为相应的水果名称。 如果要实现与后端的交互，可以使用AJAX技术实现异步请求。当用户选择多选框时，可以通过JavaScript获取用户选择的值，然后将其通过AJAX请求发送给后端处理。后端可以根据接收到的值进行相应的处理，然后将处理结果返回给前端。前端可以通过回调函数等方式处理返回的结果。 以下是一个简单的示例代码： ``` // HTML代码 <input type="checkbox" name="fruit" value="apple">苹果 <input type="checkbox" name="fruit" value="banana">香蕉 <input type="checkbox" name="fruit" value="orange">橘子 <button onclick="submit()">提交</button> // JavaScript代码 function submit() { var fruits = []; var checkboxes = document.getElementsByName('fruit'); for (var i = 0; i < checkboxes.length; i++) { if (checkboxes[i].checked) { fruits.push(checkboxes[i].value); } } var xhr = new XMLHttpRequest(); xhr.open('POST', '/api/fruit'); xhr.setRequestHeader('Content-Type', 'application/json'); xhr.onreadystatechange = function() { if (xhr.readyState === XMLHttpRequest.DONE) { if (xhr.status === 200) { var response = JSON.parse(xhr.responseText); // 处理返回结果 } else { console.error('请求出错'); } } }; xhr.send(JSON.stringify({ fruits: fruits })); } // 后端代码（使用Node.js和Express框架示例） app.post('/api/fruit', function(req, res) { var fruits = req.body.fruits; // 根据接收到的水果值进行处理 res.send({ message: '处理成功' }); }); ``` 在这里，我们通过JavaScript获取用户选择的多选框值，并将其通过AJAX请求发送给后端处理。后端可以根据接收到的值进行相应的处理，然后将处理结果返回给前端。前端可以通过回调函数等方式处理返回的结果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

代码De搬运工

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值