JS加入行动改变

Question

类

我的网站上我有几个分度，输入，默认情况下此单选按钮中选择其中一个跨度上面输入上课checked

它看起来像：

<label> 
<li class="vir"> 
<div class="radio"> 
<span class=""><input type="radio" class="attribute_radio" name="group_4" value="34"></span> 
</div> 
</li> 
</label> 

//default option span.checked below 

<label> 
<li class="vir"> 
<div class="radio"> 
<span class="checked"><input type="radio" class="attribute_radio" name="group_4" value="34"></span> 
</div> 
</li> 
</label> 

现在对于标签其中span.checked我想补充的元素<li class="vir">类test所以我添加以下代码：

<script type="text/jscript"> 
$(function() { 
    var x =document.querySelectorAll('span.checked'); 
[].forEach.call(x, function(span) { 
    span.parentElement.parentElement.classList.add('test'); 
}); 
}); 
</script> 

页面在d加载默认选项类test被添加到li但是，当我点击另一个单选按钮类没有改变，在旧的li类仍然是，并在新选择li类test没有出现。我如何将这个动作添加到我的代码中？

Answer 1

你需要寻找的复选框比改变运行代码

https://api.jquery.com/change/

Demo

$(function() { 
    $('span input:radio').change(function() { 
    if (this.checked) { // if radio button is checked 
     var x = document.querySelectorAll('li.vir'); 
     [].forEach.call(x, function(li) { // looping over all li with class vir 
      li.classList.remove('test'); // remove class test from li 
     }); 
     this.parentElement.parentElement.parentElement.classList.add('test'); 
    } 
    }).change(); // .change will run for the 1st time when page loads 
}); 

你可以更好的使用完整的jQuery

Demo

$(function() { 
    $('span input:radio').change(function() { 
    if (this.checked) { // if radio button is checked 
     $('li.vir').removeClass('test'); //remove class test from li 
     $(this).closest('li').addClass('test'); // add class test to li 
    } 
    }).change(); // .change will run for the 1st time when page loads 
}); 

https://api.jquery.com/addclass/

https://api.jquery.com/removeclass/