如何使单击单选按钮的行为与单击其容器的行为相同？

Question

我有一堆单选按钮包裹在 div-s、label-s 等中。一个简化的版本是这样的：

<div>
  <label for="rb__1">
   <input type="radio" name="rb__1" onclick="onRadioButtonClick(event)" value="some_val__1" />
   <span style="....">my rb__1</span>
  </label>
</div>


<div>
  <label for="rb__2">
   <input type="radio" name="rb__2" onclick="onRadioButtonClick(event)" value="some_val__2" />
   <span style="....">my rb__2</span>
  </label>
</div>

<div>
  <label for="rb__3">
   <input type="radio" name="rb__3" onclick="onRadioButtonClick(event)" value="some_val__3" />
   <span style="....">my rb__3</span>
  </label>
</div>

处理程序：

   <script>
    function onRadioButtonClick(event) {
       /* handler; it may read 'value' of the current radio-button and other things */  
    }
   </script>

我还想将onclick 处理程序添加到每个div，以便单击它会导致相同的行为：将选择适当的单选按钮并以与单击单选按钮相同的方式进行处理按钮本身。所有这一切都尽可能少的复制粘贴。

我不能简单地在div 上添加onclick，因为处理程序会从event 读取某些内容，并且这些内容特定于单选按钮。

我也不想要不必要的if (clickOnDiv) then... else if (clickOnRadio) then...。

如何以正确的方式做到这一点？

Answer 1

您使用 id 和 for 属性。 id 属性为您的输入类型提供了一个 id，而标签上的 for 属性可以找到任何匹配相同名称的输入。如果他们的名字匹配，你就会得到想要的结果。

此外，在一个组中，所有单选按钮的名称属性值应相同，否则，您将能够选择多个项目。

我没有向单选按钮添加切换功能，但您可以使用 JavaScript 来实现。

<input type="radio" id="radio-button" name="radio">
<label for="radio-button" class="radio-btn-1">Radio Button</label>

<input type="radio" id="radio-button-2" name="radio">
<label for="radio-button-2" class="radio-btn-2">Radio Button 2</label>

Answer 2

我建议您使用label 元素，而不是使用 div 标签作为顶级元素。

label 的for 属性的值和input 标记的id 属性的值必须相同。所以当用户点击标签时，相应的单选元素将被选中/取消选中，并触发onchange事件。

function onRadioButtonClick(e){
  console.log(e.target.value);
}

<label for="rb__1">
    <input id="rb__1" type="radio" name="rb__1" onchange="onRadioButtonClick(event)" value="some_val__1" />
    <span style="....">my rb__1</span>
</label>

<label for="rb__2">
    <input id="rb__2" type="radio" name="rb__2" onchange="onRadioButtonClick(event)" value="some_val__2" />
    <span style="....">my rb__1</span>
</label>

Answer 3

要将div 元素用作单击事件的侦听器，您必须有条件来检查被触发的事件，即除输入之外的三个潜在元素 => LABEL、SPAN 或 @987654324 @。

必须使用事件以不同方式处理其中的每一个其实是。 div 和 label 我们可以简单地query 输入 strong> 选择器，因为它将是一个孩子，而 span 我们必须以 parent 为目标，然后获取它的 第一个 child，所以条件将不同于前两个。

const parent = document.querySelectorAll('.parent')

function selectInput(e) {
  $this = e.target;
  let input = $this.querySelector('input[type="radio"]')  
  $this.tagName === "DIV" ?
    input.checked === true ?
    input.checked = false :
    input.checked = true :
    null;
  $this.tagName === "LABEL" ?
    input.checked === true ?
    input.checked = false :
    input.checked = true :
    null;
  $this.tagName === "SPAN" ?
    $this.parentNode.children[0].checked === true ?
    $this.parentNode.children[0].checked = false :
    $this.parentNode.children[0].checked = true :
    null;
  console.log($this.tagName)
}

parent.forEach(div => div.addEventListener('click', selectInput))

<div class="parent">
  <label for="rb__1">
   <input type="radio" name="rb__1" value="some_val__1" />
   <span style="....">my rb__1</span>
  </label>
</div>

<div class="parent">
  <label for="rb__2">
   <input type="radio" name="rb__2" value="some_val__2" />
   <span style="....">my rb__2</span>
  </label>
</div>

<div class="parent">
  <label for="rb__3">
   <input type="radio" name="rb__3" value="some_val__3" />
   <span style="....">my rb__3</span>
  </label>
</div>