使用javascript更改父范圍元素的類名

Question

單擊輸入單選按鈕如何更改父范圍元素的類名。

 <label for="L"> <span class="lbllevel1"> <span class="label-size">L</span> <input id="L" name="size" type="radio" value="L"> </span> </label> 

我想單擊單選按鈕時將“ selected”類添加到跨度為“ lbllevel1”類的元素。

基本上，單擊單選按鈕時，我需要輸出為<span class="lbllevel1 selected">

Answer 1

您可以將事件監聽器添加到單擊事件或更改事件的單選按鈕，使用document.getElementById('L')獲取輸入，事件處理函數內部使用e.currentTarget獲取當前單擊的輸入，可以使用.classList +=向元素添加類，如下所示：

 var input = document.getElementById('L'); input.addEventListener("click", function(e){ e.currentTarget.parentElement.classList += ' selected'; }) 

 .selected{ background-color:#888888; } 

 <label for="L"> <span class="lbllevel1"> <span class="label-size">L</span> <input id="L" name="size" type="radio" value="L"> </span> </label> 

Answer 2

var lInput = document.getElementById("L");
lInput.addEventListener("click", function() {
    lInput.parentNode.classList.add("selected");
})

Answer 3

如果selected了單選，則可以通過selected添加類的父元素來收聽單選的更改事件：

document.querySelector("#L").addEventListener("change", function () {
  // check if radio is checked
  if (this.checked)
  {
     // add .selected class to parent
     this.parentElement.classList.add("selected");
  }
});

工作副本

Answer 4

<label for="L">
<span class="lbllevel1">
      <span class="label-size">L</span>
      <input id="L" name="size" onclick="changeAttr(this)" type="radio" 
value="L">
  </span>
</label>

<script>

 function changeAttr(ele)
{
    ele.parentElement.classList.add('newClass');
}

</script>

請查看這是否有幫助:)

Answer 5

查看姓名

if($("input:radio[name='Name']").is(":checked")) {
         //write your code         
}

上課檢查

if($("input:radio[class='className']").is(":checked")) {
     //write your code         
}

查看數據

if($("input:radio[data-name='value']").is(":checked")) {
         //write your code         
}