HTML 如果一个复选框被选中，那么其他复选框则不能

Question

使用像“overflow-wrap”或“word-break”这样的CSS属性：

/* word-break solution */

 -ms-word-break: break-all;

     word-break: break-all;

     /* Non standard for WebKit */

     word-break: break-word;

/* Use word break with hyphens property */

-webkit-hyphens: auto;

   -moz-hyphens: auto;

        hyphens: auto;

或使用“溢出换行”：

overflow-wrap: break-word;

如果这些属性不起作用，请尝试一起使用它们，或使用主要版本的浏览器（我的意思是，绝对不是 IE 11 😅）

Answer 1

您可以使用querySelectorAll查找不是关键复选框 ( none) 的复选框集合，并根据关键复选框的状态对每个复选框禁用/启用它，如下所示：document.addEventListener('DOMContentLoaded',e=>{&nbsp; document.querySelector('input[type="checkbox"][name="none"]').addEventListener('click',function(e){//find all checkboxes that are NOT the key checkbox&nbsp; &nbsp; let col=document.querySelectorAll('input[ type="checkbox" ]:not( [ name="none" ] )');&nbsp; &nbsp; col.forEach(chk=>{//iterate through collection&nbsp; &nbsp; &nbsp; chk.disabled=this.checked;//disable current checkbox if key is checked and enable if not checked&nbsp; &nbsp; &nbsp; if( this.checked )chk.checked=false;//if key checkbox is checked, all others cannot be checked&nbsp; &nbsp; });&nbsp; });});<table>&nbsp; <tr>&nbsp; &nbsp; <td width="100px">1. Cough</td>&nbsp; &nbsp; <td width="80px"><input type="hidden" name="cough" value="no"><input type="checkbox" class="form-control" name="cough" value="yes"></td>&nbsp; </tr>&nbsp; <tr>&nbsp; &nbsp; <td width="100px">2. Sore Throat</td>&nbsp; &nbsp; <td width="80px"><input type="hidden" name="sore_throat" value="no"><input type="checkbox" class="form-control" name="sore_throat" value="yes"></td>&nbsp; </tr>&nbsp; <tr>&nbsp; &nbsp; <td width="100px">3. Fever</td>&nbsp; &nbsp; <td width="80px"><input type="hidden" name="fever" value="no"><input type="checkbox" class="form-control" name="fever" value="yes"></td>&nbsp; </tr>&nbsp; <tr>&nbsp; &nbsp; <td width="100px">4. Flu</td>&nbsp; &nbsp; <td width="80px"><input type="hidden" name="flu" value="no"><input type="checkbox" class="form-control" name="flu" value="yes"></td>&nbsp; <tr>&nbsp; &nbsp; <td width="230px">5. None of above</td>&nbsp; &nbsp; <td width="80px"><input type="hidden" name="none" value="no"><input type="checkbox" class="form-control" name="none" value="yes"></td>&nbsp; </tr></table>&nbsp; &nbsp;&nbsp;

Answer 2

超文本标记语言<table id="sickness">JSvar checkboxes = document.getElementById("sickness").getElementsByTagName("input");var names = ["cough", "sore_throat", "fever","flu"];&nbsp;checkboxes.namedItem("none").addEventListener("change", function(e){&nbsp; &nbsp; &nbsp;if(this.checked == true){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;for(var i=0;i<names.length;i++){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;checkboxes.namedItem(names[i]).disabled = true;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; &nbsp;}else{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;for(var i=0;i<names.length;i++){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;checkboxes.namedItem(names[i]).disabled = false;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; &nbsp;}});

Answer 3

纯CSS解决方案：将 id= 添加到控制复选框将 class=dohidepottially 添加到受控表行添加CSS样式：#none:checked + table .dohidepotentially {display: none}唯一的缺点是控制复选框必须放在表格之前（对于 css 相邻选择器）。但它可以被隐藏。缩短的示例：<form>&nbsp; &nbsp; <input type="checkbox" class="form-control" name="none" value="yes" id="none">&nbsp; &nbsp; <table>&nbsp; &nbsp; &nbsp; &nbsp; <tr class="dohidepotentially">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td width="100px">2. Sore Throat</td><td width="80px"><input type="hidden" name="sakit_tekak" value="no"><input type="checkbox" class="form-control" name="sore_throat" value="yes"></td>&nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td width="100px">3. Fever</td><td width="80px"><input type="hidden" name="fever" value="no"><input type="checkbox" class="form-control" name="fever" value="yes"></td>&nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td width="230px">5. None of above</td><td width="80px"><input type="hidden" name="none" value="tiada"><label for="none">[click here]</label></td>&nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; </table></form>