单击javascript中具有单选按钮的div后如何在div中添加类答案

【问题标题】：How to add class in div after clicking the div that has radio button in javascript单击javascript中具有单选按钮的div后如何在div中添加类
【发布时间】：2017-03-09 23:16:14
【问题描述】：

我在如何在具有单选按钮的 div 中添加类时遇到问题。我想要的是当我单击 div 时，div 内的单选按钮将标记为选中，并且单选按钮的 div 容器将具有红色背景。

这是我的 javascript 代码

$( document ).on( 'click', 'div#wrapper-radio', function(event) {
    if( $(this).find("input[type='radio']").prop("checked") == false){
        if($(this).hasClass('panelLink__item--radio-checked') == false ){
            $(this).find("input[type='radio']").prop("checked", true);
            $(this).addClass('panelLink__item--radio-checked');
        }
    }
});

我的代码的问题是，它会在第一次单击时起作用，但是当我单击另一个具有单选按钮的 div 时，该类仍然存在。下面是图片

out of my code above

谁能帮我在我的代码中添加什么？还是有其他方法可以得到我想要的？请指教

【问题讨论】：

你想改变 div 点击或单选按钮点击？

标签： javascript jquery css onclick radio-button

【解决方案1】：

您需要从所有其他元素中删除该类。可以试试这个代码。

$('div#wrapper-radio').removeClass('panelLink__item--radio-checked');

这里有完整的代码

$( document ).on( 'click', 'div#wrapper-radio', function(event) {
    if( $(this).find("input[type='radio']").prop("checked") == false){
        if($(this).hasClass('panelLink__item--radio-checked') == false ){
            $(this).find("input[type='radio']").prop("checked", true);
            $('div#wrapper-radio').removeClass('panelLink__item--radio-checked');
            $(this).addClass('panelLink__item--radio-checked');
        }
    }
});

【讨论】：

感谢您的建议。我现在就试试，之后我会更新你
@SoorajChandran 如果您想检查“其他”答案的时间，您会发现它是与您的同时编写的，而不是“副本” "，坦率地说，这有点粗鲁。鉴于这个问题只有一次明智的答案，很明显如果两个人同时回答，他们会给出相同的答案。

【解决方案2】：

如果你只是想为你的单选按钮设置样式，你可以使用标签和 css。

label{
   padding: 5px;
   background-color: yellow;
   border-radius:5px;
}
input[type=radio]:checked+label{
    background-color:orange;
  }

input[type=radio]{
   display:none;
  }

<input type=radio name=radio id="one" checked/><label for="one">One</label>
<input type=radio name=radio id="two"/><label for="two">Two</label>
<input type=radio name=radio id="three"/><label for="three">Three</label>

【讨论】：

【解决方案3】：

在将其添加到一个之前，从所有包装器中删除该类：

$( document ).on( 'click', 'div#wrapper-radio', function(event) {
    if( $(this).find("input[type='radio']").prop("checked") == false){
        if($(this).hasClass('panelLink__item--radio-checked') == false ){
            $(this).find("input[type='radio']").prop("checked", true);
            $('div#wrapper-radio').removeClass('panelLink__item--radio-checked');
            $(this).addClass('panelLink__item--radio-checked');
        }
    }
});

【讨论】：

谢谢。这是工作。你的答案和@Sooraj Chandran 是一样的，而且他们都有效。