javascript练习----复选框全选，全不选，反选

第一种方式：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>body{color: #000}</style>
<script>
document.write("<ul>");
for (var i = 0; i <20; i++) {  创建20个Li document.write("<li>");document.write('<input type="checkbox" name="ids[]" value="'+i+'">ffffffffff'); input名字要加“[]”这样后端程序取得时候为数组。document.write("</li>");}document.write("</ul>");document.write('<a href="javascript:sall()">全选 </a>'); 此a被点击的时候调用sall方法，此处是调用不是赋值所以要加上“()”。document.write('<a href="javascript:nall()">全不选 </a>');document.write('<a href="javascript:fall()">反选 </a>');var unames=document.getElementsByName("ids[]");function sall(){for(var i=0;i<unames.length;i++){unames[i].checked="true";}}function nall(){for(var i=0;i<unames.length;i++){unames[i].checked="";}}function fall(){for(var i=0;i<unames.length;i++){if(unames[i].checked){unames[i].checked="";}else{unames[i].checked="true";}}}
</script>
</head>
<body>
</body>
</html>

第二种方式：

<script>
document.write("<ul>");
for (var i = 0; i <20; i++) {document.write("<li>");document.write('<input type="checkbox" name="ids[]" value="'+i+'">ffffffffff');document.write("</li>");}document.write("</ul>");document.write('<label for="sall"><input type="checkbox" id="sall" οnclick="sall(this)">全选</label>');this把当前的checkbox对象传递给函数内部方便调用该checkbox对象。var unames=document.getElementsByName("ids[]");
function sall(that){for (var i = 0; i <unames.length; i++) {unames[i].checked=that.checked;}
}
</script>

转载于:https://www.cnblogs.com/xiaominwu/p/4348018.html

javascript练习----复选框全选，全不选，反选相关推荐

vue复选框选中一个全选中了
vue复选框选中一个全选中了在业务开发中,使用了checkbox-group组件,发现点击其中的一个选项后,所有数据都被选中了,取消也是全部取消了. 原因:绑定数据的时候,定义的是字符串,修改为数组 ...
JQuery实现复选框CheckBox的全选、反选、提交操作
对复选框最基本的应用,就是对复选框进行全选.反选和提交等操作.复杂的操作需要与选项挂钩,来达到各种级联反应效果. [示例]使用Jquery实现复选框CheckBox的全选.反选.提交操作. (1)创建 ...
好用的下拉选框（单选，多选，全选，清空和反选，及个种样式）----个人钟爱
下拉选框如需样例和具体效果,请点击下面的连接. 好用的下拉选框(单选,多选,全选,清空和反选,及个种样式) 附件一:layui应用formselect layui.config({base: './ ...
Flutter：使用复选框进行下拉多选
Flutter:使用复选框进行下拉多选本文向您展示了在 Flutter 中使用复选框实现下拉多选的两种不同方法.在第一种方法中,我们将从头开始构建多选.在第二种方法中,我们将使用第三方包快速完成工作 ...
jq设置checked是否选中_jQuery对checkbox复选框操作：判断是否选中等
<jQuery对checkBox复选框操作:判断是否选中等>要点: 本文介绍了jQuery对checkBox复选框操作:判断是否选中等,希望对您有用.如果有疑问,可以联系我们. 一.jqu ...
方形勾选框html,Selenium之勾选框操作
勾选框操作: 所谓勾选框,也可以叫复选框,意思是可以勾选一个及以上或全部勾选.勾选框的图标一般都是方形的. 复选框勾选一般分为三种情况: ①勾选单个框,我们直接用元素定位的方式定位到点击即可. ②勾选 ...
复选框实现。全选、全不选、多选
复选框实现全选.全不选.被选: html代码 <input type="checkbox" id="checksboxs">全选<input ...
JQ对复选框全选、获取复选框的值、回选
1.全选.全不选: function checkAllFun(a){if (a.checked){$("input[name='checkbox']:checkbox").each ...
vue设置多选框默认勾选_vue中复选框怎么默认全选，至少选择4个才可以点击下一步...
[1]项目中有这样的需求,要怎么解决呢...默认复选框是全选状态,也可以取消某一个状态,至少选择4个选项才可以点击下一步.这个要怎么实现啊 html: 原料进厂模块组装成品质检仓储物流销售 ...
layui 实现表单、表格中复选框checkbox的全选功能
一.layui 实现表单中多选框的全选功能,代码如下: //html页面表单 <form class="layui-form"><div class=" ...

javascript练习----复选框全选，全不选，反选

javascript练习----复选框全选，全不选，反选相关推荐

最新文章

热门文章