HTML（或jQuery）：Select一个或两个复选框（或单选按钮）

Question

我在 HTML 中有两个复选框，默认情况下都是 select。用户可以删除select他们。

现在，我希望经常选中两个复选框中的至少一个。也就是说，用户可以同时检查它们，或者只检查其中一个，但他们不应该能够取消-select 两者。

（背景信息：它们连接到一个 hide/show-jQuery-toggle，将两者都删除select会使整个页面变空。）

您知道如何执行此操作（使用复选框或单选按钮 - 或其他方式）吗？非常感谢您的帮助！

Answer 1

既然你说使用 jQuery:

本质上我们只是添加一个事件侦听器，如果没有选中任何框，我们将防止最后一个框被取消选中。

<input type="checkbox" class="at-least-one">
<input type="checkbox" class="at-least-one">

<script type="text/javascript">
$(document).on("click", ".at-least-one", function(evt) {
  // This is technically run after the checked value changes, so we're checking
  //   if there is no more boxes checked after we uncheck this one. If there is
  //   no more, then prevent the event, setting the box back to checked.
  if ($(".at-least-one:checked").length == 0) {
    evt.preventDefault()
    return false
  }
})  
</script>

Answer 2

HTML

<div>
  <input type="radio" data-bind="div1" name="radioGroup" value="both" class="radioGroup">
  <input type="radio" data-bind="div2" name="radioGroup" value="Option 1" class="radioGroup">
  <input type="radio" data-bind="div3" name="radioGroup" value="Option 2" class="radioGroup">
</div>

Javascript

const radioButtons = document.getElementsByClassName(`radioGroup`);

[...radioButtons].forEach(button => {
  button.addEventListener(event => {
     const boundElement = event.target.dataset.bind;
     classOfToggle.forEach(element => {
         element.id === boundElement 
           ? element.style.display = `block` 
           : element.style.display = `none`;
     });
  });
});

Answer 3

您可以为它们添加一个 click 事件侦听器，如果选中复选框的数量是错误值 (0)，则 return false。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>One checkbox must always be checked</p>
<input type="checkbox" name="checkone" checked>
<input type="checkbox" name="checkone" checked>
<script>
$('input[name=checkone]').click(function(e){
  if(!$('input[name=checkone]:checked').length){
   return false;
  }
});
</script>

HTML（或jQuery）：Select一个或两个复选框（或单选按钮）

HTML (or jQuery): Select either one or both checkboxes (or radio buttons)

html

javascript

checkbox

jquery

radio