判断一组多选框至少有一个被选中_今天在web单选按钮上遇到的一个坑,不知道还有人遇到过没...

在项目中不好给大家介绍,于是我写了一个简单的页面来给大家讲解。

0ed5c5223186f8213eb9f30ec0acb237.png

大致功能就是我点启用或者禁用按钮时,它们上方对用的点选按钮就会被选中。

用如下代码实现(网上搜的方法,还有几个效果都一样)

77ebf8ab9d217dc213862b4998f21ec9.png

这个 radio()方法是为了让某个单选按钮自动被选中。

然后在浏览器上面点击启用按钮,上方的单选框就被选中了,在点击禁用按钮,对应的单选框也被选中了。

681e19c99ca3367a4084c1a792d1b313.png

但是当我再次点击启用按钮时,居然没效果了(也就是说重复2次就不管用了)。

a25fb860ac062027b6477587d5b0958e.png

试了几遍发现还是这样,打了个断点发现这个方法是执行了的,那问题到底出在哪里了呢?

搞了半天我想出了如下的这个方法:

90c18c74c235f41b6f2202692f78530c.png

加了一行代码,先让所有的单选按钮都取消选中,然后再自动选中某个按钮,刷新一下浏览器页面,发现不会出现上面的情况了(偷笑)。

当我得意了一会儿后却发现如果我用鼠标点击了某个单选框以后无论怎么点击按钮都不管用了。

0e0accc34adc02bb32b1c1dcb23fbc3f.gif

缓了半天,我怀疑是不是方法出了问题呀,于是我在百度上搜了半天,结果全是上面介绍的那几个方法。

fb1da062f5c5ee264544a3b85ca19de9.gif

再百度里找了大概半个小时,终于给我找着了BUG产生的原因:

17a8ac6e9c8303b893028ca949d8cc60.png

真的是方法用错了

应该用prop方法,这是因为prop才是官方推荐的操作元素的固有属性,比如input标签的id/class/type/style等等,而attr更多的是用来操作元素的自定义属性。

题外话:

相信很多小伙伴都在百度或者搜狗再或者谷歌里面查找过方法吧,然后每次都要找半天,大多文档说的都是某个人的小技巧哇,心得什么的,也许他用不会出错,没准你用的话它就出错了,像我这种小新没一会儿心态就炸了,希望以后能出个直接在书里面寻找答案的网站,喜欢看书的我还是比较相信书里面的内容的。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值