如何使單擊單選按鈕的行為與單擊其容器的行為相同？

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>

我還想向每個div添加onclick處理程序，以便單擊它會導致相同的行為：將選擇一個適當的單選按鈕，並以與單擊單選按鈕本身相同的方式進行處理。 所有這一切都需要盡可能少的復制粘貼。

我不能簡單地在div上添加onclick ，因為處理程序從event讀取某些內容並且特定於單選按鈕。

而且我不想要不必要的if (clickOnDiv) then... else if (clickOnRadio) then...要么。

如何以正確的方式做到這一點？

Answer 1

您使用 id 和 for 屬性。 id 屬性為您的輸入類型提供一個 id，而 for 標簽上的屬性可查找任何與相同名稱匹配的輸入。 如果他們的名字匹配，你就會得到想要的結果。

同樣在一個組中，所有單選按鈕的 name 屬性應該具有相同的值，否則，您將能夠選擇多個項目。

我沒有向單選按鈕添加切換功能，但您可以使用 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元素用作單擊事件的偵聽器，您必須有條件來檢查正在觸發的事件，即除了 input => LABEL 、 SPAN或DIV之外的三個潛在元素。

這些中的每一個都必須使用事件以不同的方式處理，特別是如果您想要與事件實際所在的元素相關的單獨事物。 div和標簽我們可以簡單的查詢輸入選擇，因為這將是一個孩子，而跨度，我們必須針對父母，然后獲取其第一個孩子，所以條件會比訴訟兩種不同的。

 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>