一键实现全选和全不选

html代码

<div id="box"><p><input type="checkbox">1</p><p><input type="checkbox">2</p><p><input type="checkbox">3</p><p><input type="checkbox">4</p><p><input type="checkbox">5</p><p><input type="checkbox">6</p>
</div>

js代码

 var inputs = document.getElementById("box").getElementsByTagName("input");var btn = document.getElementById("btn");//信号量var state = 0;btn.onclick = function () {//信号量如果是0 ，则变为1 ，如果是 1，则变为 0state = state == 0 ? 1: 0;//根据信号量的值，来 改变checked 的值 如果是0 ，就变成”“var str = state == 0 ? "": "checked";//改变按钮的value值this.value = state == 0 ? "全选" : "全不选";for(var i = 0 ; i < inputs.length ; i++){inputs[i].checked = str;}}

实现效果

一键实现全选和全不选相关推荐

html页面列表一键全选选,JQuery控制Html页面Checkbox全选和全不选
说明:Checkbox的全选和全不选应用较为普遍,网上的资料大多数都是原生JS的实现方式,大家你超我,我超你,没意思!今天用JQuery试着写了一下,采用了新的角度实现,供大家参考一下,直接上代码,解 ...
关于微信小程序的多选和全选实现
效果简述今天实现了一个小程序版的仿后端管理界面的多选和全选checkbox,大致思路如下实现 wxml  <checkbox-group bindch ...
javascript 计算器、动态时钟、表格复选框全选（扩展）、轮播图、36选7、随机数...
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
Jquery 复选框全选与反选点击执行一次然后失效解决方案
Jquery 复选框全选与反选点击执行一次然后失效解决方案参考文章: (1)Jquery 复选框全选与反选点击执行一次然后失效解决方案 (2)https://www.cnblogs.com/feng ...
jquery全选/取消全选(反选)/单选操作
使用jQuery实现一组checkbox全选/取消全选,代码很简洁. jquery版本:2.0 先看看HTML代码,很简单的操作框 </head> <body><div& ...
html表单全选框,form表单里如何实现全选和全不选
JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果. javascript实现全选和全不选效果: 1.首先你 ...
jquery的全选，全不选，反选
jquery的全选,全不选,反选: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind=&q ...
vue 多层双层全选_vue多级复杂列表展开/折叠及全选/分组全选实现
首先,来看下效果图在线体验地址:https://hxkj.vip/demo/multipleList/.温馨提示,打开之后按F12,使用手机模式食用,口味更佳! 可以看出,这个列表有三种展现形式: ...
隔行换色案例||全选和全不选||QQ表情选择||多选下拉列表左右移动
01.隔行换色.html <!DOCTYPE html> <html><head><meta charset="UTF-8">< ...
复选框全选效果，根据单个复选框的选择情况确定全选复选框是否被选
复选框全选与全不选效果逻辑:复选框的checked属性与复选框全选效果对应起来,全选复选框checked:true 时,全部复选框checked:true: 全选框checked:false 时,全 ...

一键实现全选和全不选

一键实现全选和全不选相关推荐

最新文章

热门文章