如何通过JS实现反选功能?

下面有个表格:

 表格代码如下:



通过JS实现反选功能|web前端高手班 http://web.itheima.com

反选班级类型开班时间开班状态
基础班2021-08-31报满已开
基础班2021-09-11报满已开
高手班2021-08-05报满已开
高手班2021-09-28报满已开
高手班2021-11-11即将开班

功能需求:实现反选功能

效果如下:

功能实现思路一:

1. 为id="check"绑定click事件;

2. 找到所有需要控制的input元素

3. 通过循环遍历找到tbody中每个input

4. 更改input的checked的值,如:false改为true

JavaScript代码如下:

    

代码简化版:

    

完整代码:



通过JS实现反选功能|web前端高手班 http://web.itheima.com

反选班级类型开班时间开班状态
基础班2021-08-31报满已开
基础班2021-09-11报满已开
高手班2021-08-05报满已开
高手班2021-09-28报满已开
高手班2021-11-11即将开班

想想上面表格如何实现鼠标悬浮对应表格变色呢?

可以参考下面文章:

​​​​​​​鼠标放到表格整行变色效果怎么实现?


本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场,不承担相关法律责任。如若转载,请注明出处。 如若内容造成侵权/违法违规/事实不符,请点击【内容举报】进行投诉反馈!

相关文章

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部