实现全选

最新推荐文章于 2022-11-26 18:34:39 发布
最新推荐文章于 2022-11-26 18:34:39 发布
阅读量764 收藏
点赞数
文章标签： function javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jhoni/article/details/577129
版权

<script language="javascript" type="text/javascript"> function check_anyone_checked(form1) { var form_length = form1.length; var state = false; if( form_length >0 ) { for( i=0; i<form_length;i++) { if(form1.elements[i].type == 'checkbox') { if(form1.elements[i].checked == true) { state = true; } } } if(state==true) form1.allSelect.value="清除所有选择项"; else form1.allSelect.value="全选"; return state; } else { alert('无记录'); } } function btn_select_all_onclick(form1) { var form_length = form1.length; var state = check_anyone_checked(form1); if( state == true ) { for( i=0; i<form_length;i++) { if(form1.elements[i].type == 'checkbox') { form1.elements[i].checked = false; form1.allSelect.value="全选"; } } } else { for( i=0; i<form_length;i++) { if(form1.elements[i].type == 'checkbox') { form1.elements[i].checked = true; form1.allSelect.value="清除所有选择项"; } } } } </script> <script language="javascript">
function check_anyone_checked(form1)
{
var form_length = form1.length;
var state = false;
if( form_length >0 )
{
for( i=0; i<form_length;i++)
{
if(form1.elements[i].type == 'checkbox')
{
if(form1.elements[i].checked == true)
{
state = true;
}
}
}
if(state==true)
form1.allSelect.value="清除所有选择项";
else
form1.allSelect.value="全选";
return state;
}
else
{
alert('无记录');
}
}
function btn_select_all_onclick(form1)
{
var form_length = form1.length;
var state = check_anyone_checked(form1);
if( state == true )
{
for( i=0; i<form_length;i++)
{
if(form1.elements[i].type == 'checkbox')
{
form1.elements[i].checked = false;
form1.allSelect.value="全选";
}
}
}
else
{
for( i=0; i<form_length;i++)
{
if(form1.elements[i].type == 'checkbox')
{
form1.elements[i].checked = true;
form1.allSelect.value="清除所有选择项";
}
}
}
}
</script>
<script language="javascript" type="text/javascript"> function check_anyone_checked(form1) { var form_length = form1.length; var state = false; if( form_length >0 ) { for( i=0; i<form_length;i++) { if(form1.elements[i].type == 'checkbox') { if(form1.elements[i].checked == true) { state = true; } } } if(state==true) form1.allSelect.value="清除所有选择项"; else form1.allSelect.value="全选"; return state; } else { alert('无记录'); } } function btn_select_all_onclick(form1) { var form_length = form1.length; var state = check_anyone_checked(form1); if( state == true ) { for( i=0; i<form_length;i++) { if(form1.elements[i].type == 'checkbox') { form1.elements[i].checked = false; form1.allSelect.value="全选"; } } } else { for( i=0; i<form_length;i++) { if(form1.elements[i].type == 'checkbox') { form1.elements[i].checked = true; form1.allSelect.value="清除所有选择项"; } } } } </script><script language="javascript" type="text/javascript"> function check_anyone_checked(form1) { var form_length = form1.length; var state = false; if( form_length >0 ) { for( i=0; i<form_length;i++) { if(form1.elements[i].type == 'checkbox') { if(form1.elements[i].checked == true) { state = true; } } } if(state==true) form1.allSelect.value="清除所有选择项"; else form1.allSelect.value="全选"; return state; } else { alert('无记录'); } } function btn_select_all_onclick(form1) { var form_length = form1.length; var state = check_anyone_checked(form1); if( state == true ) { for( i=0; i<form_length;i++) { if(form1.elements[i].type == 'checkbox') { form1.elements[i].checked = false; form1.allSelect.value="全选"; } } } else { for( i=0; i<form_length;i++) { if(form1.elements[i].type == 'checkbox') { form1.elements[i].checked = true; form1.allSelect.value="清除所有选择项"; } } } } </script>

jhoni
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JS实现全选与全不选
Those who achieve great thing do not stick to trifles
01-25 7256
JS实现全选与全不选 一、步骤分析 1、使用<input type="checkbox" >进行复选框的布局。 2、对全选框进行事件绑定。(鼠标单击) 3、编写全选函数。 4、获取复选框的状态，使其他复选框与全选框的状态一致。 二、代码练习 <!DOCTYPE html> <html> <head> <meta charse...
实现全选功能
Isleta_的博客
03-25 1209
<th class="column-title" style='width:55px'> <input type="checkbox" id="all" style='vertical-align:middle'> <label for="all" style='vertical-align:middle;display:inline-block'>...
JS 实现全选
夏沐的博客
01-21 429
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt; * { padding: 0; margin: 0;
全选功能得实现
Betty_666的博客
11-18 153
全选复选框勾选状态
el-select 下拉框多选实现全选的实现
10-16
它可以方便地实现单选或多选功能，但在某些场景下，用户需要实现全选功能，即在多选下拉框中可以选择或取消选择所有选项。文章《el-select 下拉框多选实现全选的实现》介绍了两种实现el-select下拉框全选的方法。 ...
vue2.0中vue-cli实现全选、单选计算总价格的实例代码
08-29
vue2.0中vue-cli实现全选、单选计算总价格的实例代码 本篇文章主要介绍了vue2.0中vue-cli实现全选、单选计算总价格的实例代码，该实例代码具有很高的参考价值，感兴趣的小伙伴们可以参考一下。 一、Vue CLI简介 ...
React实现全选功能
11-19
本文实例为大家分享了React实现全选功能的具体代码，供大家参考，具体内容如下< 1、主要就是使用state状态管理 2、jsx写的时候要多留心，return 的时候最好用一个()包着元素部分，不然有可能编译不过。 <!...
vue2.0在table中实现全选和反选的示例代码
08-28
本示例代码展示了 Vue 2.0 中实现 Table 全选和反选的示例代码，并介绍了相关的知识点，包括使用 Vue 的模板语法、实现全选和反选的逻辑、使用 LocalStorage 存储页面信息、使用 CSS 美化页面样式、使用 Vue 的生命...
ant design的table组件实现全选功能以及自定义分页
01-18
ant design的table组件实现全选功能以及自定义分页 直接附上全部代码以及截图了 import './index.scss'; import React from 'react'; import {Checkbox, Table, Popconfirm} from 'antd'; class TestComponent ...
全选、全不选、反选功能的实现
飞鱼同学
01-26 4609
全选、全不选、反选 实现的功能是： 选中下面全选框，全部的框都会选中，反之就会全不选中； 当点击反选按钮时，选择框中的选框状态置反，选中的变为没选中，没选中变为选中 直接上代码： index.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>全选、全不选、反选</title> </head> <body> <f
JavaScript简单实现全选和全不选功能
D_BBY的博客
08-29 737
JavaScript实现全选全不选功能， 其中使用的getElementsByTagName获取元素 根据标签名称获得多个元素：getElementsByTagName(标签名称) 实现代码： 注意：这里只是简单的实现了全选和全不选操作，并未实现其他功能。 <!DOCTYPE html> <html> <head> <meta charse...
如何实现全选全不选
sunbeibei00000的博客
01-21 187
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <input type="checkbox" value="全选" id="ckAll" />水果</br> <div class="box"> <in.
前端 实现 全选/全不选，
weixin_42061391的博客
08-13 2521
       &lt;th&gt;         &lt;input type="checkbox" id="check_all"/&gt;     //全选框        &lt;/th&gt;        &lt;th&gt;#&lt;/th&gt;        &lt;th&gt;empName&lt;/th&gt;        &l
js实现案例全选全不选(超详细)
qq_45378970的博客
09-29 1051
完整代码如下 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { padding: 0; margin: 0; } .wrap { width: 300px; margin: 100px auto 0;
【JavaScript】实现全选和反选功能
weixin_62012986的博客
11-26 1761
这种情况在购物车中尤为常见
如何实现一键全选
Towify的博客
11-18 1206
使用Towify制作微信小程序，实现一键全选
乘法表.php
Vivian_shuang的博客
08-15 481
html> html lang="en"> head> meta charset="UTF-8"> meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> me
computed实现全选
最新发布
04-08
computed属性可以用来实现全选功能。下面是一个使用computed属性实现全选的示例代码[^1]： ```html <template> <div> <input type="checkbox" v-model="selectAll"> 全选 <div v-for="item in items" :key="item.id"> <input type="checkbox" v-model="item.checked"> {{ item.name }} </div> </div> </template> <script> export default { data() { return { items: [ { id: 1, name: 'Item 1', checked: false }, { id: 2, name: 'Item 2', checked: false }, { id: 3, name: 'Item 3', checked: false } ] }; }, computed: { selectAll: { get() { return this.items.every(item => item.checked); }, set(value) { this.items.forEach(item => { item.checked = value; }); } } } }; </script> ``` 在上面的代码中，我们使用了一个computed属性`selectAll`来实现全选功能。当点击全选按钮时，`selectAll`的setter方法会将所有的`item.checked`属性设置为相应的值，从而实现全选或全不选的效果。而getter方法则用来判断是否所有的`item.checked`属性都为true，从而决定全选按钮的状态。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值