html选中一个复选框,HTML - 当您选中一个复选框时,是否可以取消选中所有其他复选框?...

基本上我建立一个画廊,纯CSS。当我按下image1时,它会检查复选框1,并出现div1。我已经这样做了,问题是,如果我按下图像2,div2会出现,但如果再次按下图像1,则div1不会出现,因为div2在它的前面。HTML - 当您选中一个复选框时,是否可以取消选中所有其他复选框?

HTML:

,因为我没有发现我怎么能自动缩进代码,但你可以在这里看到它,我将不会发布的CSS:http://jsfiddle.net/blackice856/3vhCH/1/

基本上我需要的是当checkbox1选中所有其他复选框,然后重复所有剩余的复选框。

我从来不喜欢JavaScript,但我只是做了它,它花了我10分钟大声笑,但我仍然想知道是否有任何方式做到这一点。

感谢您的时间(:。

+8

如果你只想一次检查一次,那么为什么不使用单选按钮? –

+0

我尝试过使用单选按钮,但他们唯一的办法是只有一个名字,就像你在例子中看到的那样我需要他们有不同的名字,以便在检查时执行不同的操作。 –

+0

ops,实际上它工作得非常好!我不知道单选按钮c有一个名字和一个ID。他们可以有不同的ID和相同的名字,我只是给了他们相同的名字,现在正在工作!感谢您的时间(http://jsfiddle.net/blackice856/3vhCH/3/ –

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以通过监听复选框的 `change` 事件,来实现这个功能。具体步骤如下: 1. 给每个复选框设置一个相同的 class,用于选择器选择。 2. 给每个复选框都添加一个 `change` 事件监听函数,在事件处理函数中,判断当前复选框是否选中,如果被选中则禁用其他的复选框;否则,取消禁用其他复选框。 3. 在事件处理函数中,需要使用 `querySelectorAll` 获取所有的复选框元素,然后循环遍历,对除了当前复选框以外的所有复选框进行禁用或取消禁用的操作。 具体代码实现如下: HTML: ```html <table> <tr> <td><input type="checkbox" class="checkbox" /></td> <td>选项1</td> </tr> <tr> <td><input type="checkbox" class="checkbox" /></td> <td>选项2</td> </tr> <tr> <td><input type="checkbox" class="checkbox" /></td> <td>选项3</td> </tr> </table> ``` JavaScript: ```javascript const checkboxes = document.querySelectorAll('.checkbox'); checkboxes.forEach(checkbox => { checkbox.addEventListener('change', e => { if (e.target.checked) { checkboxes.forEach(cb => { if (cb !== e.target) { cb.disabled = true; cb.checked = false; } }); } else { checkboxes.forEach(cb => { if (cb !== e.target) { cb.disabled = false; } }); } }); }); ``` 以上代码中,我们首先使用 `querySelectorAll` 获取所有的复选框元素,并且对每个复选框都添加了一个 `change` 事件监听函数。在事件处理函数中,我们首先判断当前复选框选中状态,如果被选中,则循环遍历其他复选框,将它们禁用并且取消选中状态;否则,循环遍历其他复选框,将它们取消禁用状态。其中,我们使用 `cb !== e.target` 来判断当前遍历到的复选框是否是当前触发事件的复选框,如果是则不进行处理。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值