Question

如何在点击输入单选按钮时更改父span元素的classname。

＆＃13;

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

＆＃13;

我想添加＆＃34;已选择＆＃34; class to span element with class＆＃34; lbllevel1＆＃34;点击单选按钮。

基本上，单击单选按钮时我需要输出<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类添加父元素来收听广播的更改事件：

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

working copy

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         
}

使用javascript更改父span元素的classname

5 个答案: