SELECT 全选,反选——表单

最新推荐文章于 2023-07-31 23:14:32 发布
最新推荐文章于 2023-07-31 23:14:32 发布
阅读量1k 收藏 1
点赞数
文章标签： input button function html

 SELECT 全选,反选——表单

正文:
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
<html>
<head>
<title></title>
    <script>
    function selectAll(obj)
    {
        for(var i = 0;i<obj.elements.length;i++)
        if(obj.elements[i].type == "checkbox")
        obj.elements[i].checked = true;
    }
    function selectOther(obj)
        {
            for(var i = 0;i<obj.elements.length;i++)
            if(obj.elements[i].type == "checkbox" )
                {
                    if(!obj.elements[i].checked)
                    obj.elements[i].checked = true;
                    else
                    obj.elements[i].checked = false;
                }
        }
    </script>
</head>
  <body>
    <form name="aa">
        <input type=checkbox>
        <input type=checkbox>
        <input type=checkbox>
        <input type=checkbox>
        <input type=checkbox>
        <input type=checkbox>
        <input type=button value="all" οnclick=selectAll(document.aa)>
        <input type=button value="other" οnclick=selectOther(document.aa)>
        <input type=reset value="reset">
    </form>
</body>
</html>

Stabx
2006-5-5

btbtd
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
表单全选与取消全选
qq_51053759的博客
09-10 1442
分析： 1、全选和取消全选：让下方所有复选框的checked属性（选中状态）跟随全选按钮 2、下方的所有复选框选中全选按钮才选中，其中一个不选中全选按钮都不选中 每次点击下面的某个复选框都要循环检查下方复选框是否都被选中 flag保存全选按钮的选中状态 HTML结构： <table border="1" cellspacing="" cellpadding="0"> <tr> <th><input type=...
AngularJS 实现购物车全选反选功能
10-19
在本文中，我们将深入探讨如何使用AngularJS实现购物车中的全选和反选功能。AngularJS是一个强大的前端JavaScript框架，它提供了数据绑定、依赖注入和指令等特性，使得开发复杂Web应用变得更加简单。购物车全选反选...
select全选和反选
zerocher的博客
05-23 993
var all = document.getElementById("select_all"); var vip = document.getElementsByName("vip"),l = vip.length; all.onclick = function(){ for(var i=l;i
JS表单全选
qq_42295268的博客
02-01 123
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格全选</title> <style> table{ border: 1px solid; width: 500px; margin-left: 30%; .
表单全选取消全选
weixin_48912846的博客
01-20 631
案例分析： ①全选和取消全选做法：让下面所有复选框的checked属性（选中状态）跟随全选按钮即可 ②下面复选框需要全部选中，上面全选才能选中做法：给下面所有复选框绑定点击事件，每次点击，都要循环查看下面所有的复选框是否有没选中的，如果有一个没选中，上面全选就不选中 ③可以设置变量，来控制全选是否选中 ④ //获取元素 var j_cbAll = document.getElementById('j_cbAll') //全选按钮 var j_tbs = document.getElementById('j_
JavaScript 表单全选
09-15 516
今天学到了一个有趣的例子，在一个表单里，左边都是选框，若点击第一个全选的框，下面所有框会自动选中，若取消其中一个，全选框也会显示为选中状态。反之若选中所有非全选的框，全选框也会自动选中。先通过一个GIF图了解下相关效果。 HTML结构与css样式就不细说了，直接上代码 HTML结构 用table书写， <div class="warp"> ...
vue使用监听实现全选反选功能
08-27
Vue 使用监听实现全选反选功能 在 Vue 中实现全选反选功能是一个常见的需求，特别是在项目中需要处理大量数据时。本文将介绍如何使用 Vue 监听实现全选反选功能，通过监听子集的变化来更新全选按钮的状态。 标题...
AngularJS实现全选反选功能
10-23
主要介绍了AngularJS实现全选反选功能，这里用到AngularJS四大特性之二----双向数据绑定，对angularjs实现全选反选相关知识感兴趣的朋友一起学习吧
Javascript实现全选反选
08-11
在JavaScript编程中，"全选反选"功能是常见的用户交互设计，常见于表格或列表数据的批量操作中。这个功能允许用户一键选择或取消选择所有项目，极大地提高了操作效率。下面将详细介绍如何使用JavaScript来实现这个...
Jquery 全选反选实例代码
11-25
本文给大家分享一段基于jQuery的全选、反选和不选功能的代码，适用于网页多选后需要进行批量操作的场景（如批量删除等）。文章结合实例，代码简洁，基本覆盖选项选择操作的方方面面，希望可以帮到有需要的WEB爱好者...
el-select全选反选功能
最新发布
caief的博客
07-31 241
【代码】el-select全选反选功能。
mysql select 反选_checkbox的全选与反选
weixin_39764487的博客
02-26 671
需求：1.当all选项勾选时，所有选项都被勾选，反正当所有选项被选中时，全选选项自动选中2.点击反选按钮时，被选中的选项取消选中，未被选中的选项被选中Html结构all反选首先，我们得到我们要控制的元素，并且用for循环给每个checkbox绑定点击事件：var all=document.getElementById("all")var box=document.getElementsByTagN...
JS学习笔记-表单的全选
码出精彩
12-15 2556
表单的全选 1.页面的布局和样式 以下是一个导演信息表 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>表格全选</title> <style type="text/css"> table{ border: 1px ...
jq 表单全选
hyc22966的博客
03-26 222
jq 表单全选 使用":checked"匹配选中表单项。 // 全选 $(document).on("click",".control-label input",function(){ console.log("click"); // 取 全部选项 var childInput = $(this).parents(".control-...
Web前端（三）JavaScript (5) 表单全选
PizAn的博客
11-17 548
Date：2018/11/17 效果如图：点击一个，其他全选，可以复原： 源代码： &amp;amp;lt;!-- 1、确定事件：onclick 绑定到复选框里面； --&amp;amp;gt; &amp;amp;lt;!-- 2、获取复选框：var checkAllEle = document.getElementById(&amp;quot;id&amp;quot;) --&amp;amp;gt; &amp;amp;lt;!--
mysql select 反选_jquery input checked全选与反选1.3.2的版本
weixin_39598568的博客
02-26 61
jquery input checked全选与反选1.3.2的版本“运行代码”后“刷新一次”无标题页$.fn.checkCbx = function(){return this.each(function(){this.checked = !this.checked;});}$(function(){$("#btnSelect").click(function(){this.value = thi...
select全选，反选和不选的功能
kakaxiD的博客
06-30 3684
<div id="usual1" class="usual"> <div class="itab"> <ul> <li><a href="#tab1" class="selected">前端权限设置</a></li> <li><a href="#tab2">后台权限设置</a></li>
【Html5】表单全选、全不选
weixin_30410999的博客
08-31 263
以下为页面效果图 用HBuilder做 谷歌浏览器 index.html代码 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title>...
js全选 反选 表单
03-28
以下是一个使用JavaScript实现全选和反选的表单示例： HTML代码： ``` <form> <input type="checkbox" name="option1" value="1">选项1<br> <input type="checkbox" name="option2" value="2">选项2<br> <input type="checkbox" name="option3" value="3">选项3<br> <input type="checkbox" name="option4" value="4">选项4<br> <input type="checkbox" name="option5" value="5">选项5<br> <button type="button" onclick="selectAll()">全选</button> <button type="button" onclick="selectReverse()">反选</button> </form> ``` JavaScript代码： ``` function selectAll() { var checkboxes = document.getElementsByName('option'); for (var i = 0; i < checkboxes.length; i++) { checkboxes[i].checked = true; } } function selectReverse() { var checkboxes = document.getElementsByName('option'); for (var i = 0; i < checkboxes.length; i++) { checkboxes[i].checked = !checkboxes[i].checked; } } ``` 在上面的代码中，我们首先定义了两个函数：`selectAll()`和`selectReverse()`。`selectAll()`函数将表单中所有名为`option`的复选框都选中，而`selectReverse()`函数则将这些复选框的状态取反。 在HTML中，我们将每个复选框的`name`属性设置为`option`，以确保`document.getElementsByName('option')`可以找到所有的复选框。 最后，在表单下方，我们添加了两个按钮，一个用于全选，另一个用于反选。这些按钮都使用JavaScript函数作为其`onclick`属性，以便在单击时触发相应的操作。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值