2020-11-20选框练习

2020-11-19  本文已影响0人  大佬教我写程序

选框练习

功能:1.全选按钮点击之后下面的四个按钮自动勾选,取消之后下面的四个全部取消。  2.下面四个按钮全选之后,最上面的全选框会自动选上,下面有一个没选上,全选按钮就不会选上

选框练习

主要思路:

html框架

html框架

每一行的第一个框里面加一个input的复选框

css属性 javascript部分

全选框:   获取全选框的元素-----通过点击触发该事件------通过for循环遍历下面所有的小选框,让下面所有的元素.checked的属性和全选框的改属性保持一致。  这样一来,无论全选框在怎么变,下面的属性会和全选框的状态保持一致

四个单选框:  获取下面所有的小选框伪数组------用for循环遍历所有下面的小选框-----通过onclick触发事件-----定义一个变量flag,初值为true-----每点击一次该按钮之一就要循环一遍所有的小选框,用判断条件if (!trs[i].checked)  判断是否全部都是被原则状态,若有一个没被选择,那里面的flag就要被false赋值,最后的全选框也就被flag赋值,完成操作。

上一篇下一篇

猜你喜欢

热点阅读