js全选与取消全选,js 全选内容和取消全选
操作环境：Windows7系统，javascript1.8.5版本1.8.5，戴尔G3电脑。
javascript 怎么实现全选？
用JS实现表单的全选与反选
这也是一个练习，就是全选一般的电商购物车，再加一个反选(貌似有反选功能的购物车不多，windows Explorer有)
先说全选：
整理需求。我们先用HTML和CSS来画这个表单。代码如下：
超文本标记语言
头
meta charset=utf-8
选择所有标题2/标题
style type=text/css 。换行{
左边距：500px
边距-顶部：200px
}
表格{
边框-塌陷：塌陷；
}
th{
边框：1px纯黑；
高度：45px
}
td{
边框：1px纯黑；
文本对齐：居中；
字体粗细：粗体；
}
/风格
/头
身体
div class=wrap
表格单元格间距=0 单元格填充=14
四羟乙基己二酰胺
tr
泰国(Thailand)
input type= checkbox id= select all onclick= funcAll()
/th
Th商品/th
Th价格/th
/tr
/thead
tbody id=j_tb
tr
任务描述
input type= checkbox class= selectOne onclick= funcon()
/td
tdiPhone X/td
td8000/td
/tr
tr
任务描述
input type= checkbox class= selectOne onclick= funcon()
/td
tdiPad pro/td
td5000/td
/tr
tr
任务描述
input type= checkbox class= selectOne onclick= funcon()
/td
tdiPad air/td
td2000/td
/tr
tr
任务描述
input type= checkbox class= selectOne onclick= funcon()
/td
tdApple watch/td
td2000/td
/tr
/tbody
/表格
type= button id= backward option value= inverted onclick= func backward()
/div
/body
/html这里，我把鼠标点击事件的函数命名为。都叫“funcAll()”，其中一个叫“funcOne()”，另一个叫“funcBackward()”。CSS主要是给表单添加边框，同时将交界处的边框进行融合，基本上是最简单的外观。
先说需求2和需求3。逻辑相对简单：
DOM方法用于分别获取所有选择和单个选择的“输入”元素。所有选择只有一个，直接用getElementById()(id已经提前设置好了)就可以了，而单个选择有四个，是用getElementByClassName()(类已经提前设置好了)得到的，当然得到的是一个数组。
将获取的所有元素赋给变量，然后通过for循环遍历数组，将所有选中变量的checked属性赋给每个单个变量的checked属性。
至此，2和3同时求解完毕，代码如下：
函数funcAll(){
var select all=document . getelementbyid( select all )；
var selectOnes=document . getelementsbyclassname( selectOne )；
for(var I=0；我兴师动众；I) {//循环遍历，将所有选中框的值赋给每个单选框。
selectOnes[i]。checked=select all . checked；
}
}接下来说第一条：“四行商品全部勾选后，自动勾选“全选”；当有未勾选的产品时，“全选”自动取消。
在这里，“全选”的状态类似于监听其他所有按钮，一旦改变，就随之改变。所以这种逻辑要写在每行商品单选按钮的鼠标点击事件中。
我设置了一个变量isAllChecked作为桥。在初始状态下，isAllChecked被定义为true，循环遍历每个单选按钮。一旦检测到任何单选按钮没有被选中，我会将isAllChecked设置为false，跳出循环，并将isAllChecked的值赋给所有按钮。
这样，只要一个单选按钮没有被选中，所有的单选按钮都会变成未选中状态。代码如下：
函数funcon(){
var select all=document . getelementbyid( select all )；//函数作用域，所以要重新定义
var selectOnes=document . getelementsbyclassname( selectOne )；
var isAllChecked=true//将变量定义为控制“全选”按钮的桥梁
for(var I=0；我兴师动众；i ) {
if (selectOnes[i].checked===false) {
isAllChecked=false
打破；
}
}
selectall . checked=isAllChecked；
}
再来说说反选
第一条其实很容易实现。单击反向选择按钮时，在四个单选按钮之间循环，并反转与每个元素对应的选中属性。
然而，我们前面实现的对所有单项的全选监视实际上是在每个单选按钮的click事件中实现的。也就是说，如果我们不点击单选按钮来改变单选按钮的状态，那么全选监控实际上是无法监控全局的。
所以，我们可以把监控这部分的代码写入反选择的鼠标点击函数中，最终的代码如下：
var select all=document . getelementbyid( select all )；//函数作用域，所以要重新定义
var selectOnes=document . getelementsbyclassname( selectOne )；
for(var I=0；我兴师动众；i ) {
selectOnes[i]。isAllChecked=！selectOnes[i]。已检查；
}
funcOne()函数{ }；
var isAllChecked=true//将变量定义为控制“全选”按钮的桥梁
for(var I=0；我兴师动众；i ) {
if (selectOnes[i].checked===false) {
isAllChecked=false
打破；
}
}
selectall . checked=isAllChecked；
}最终效果如下：
推荐：《js基础教程》以上是javascript中如何实现全选的详细内容。更多请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。