Radiobutton在选中时添加类,未选中时删除类

时间:2017-03-07 09:37:06

标签: jquery css

你能帮助我吗?我想添加课程'已检查'与班级' .group_4'的跨度。我想我会使用jquery。我无法更改HTML。

现在发生的事情是:点击这两个项目时,不会删除该课程。所以两个跨度都有类#gehecked"。

任何简单的解决方案?

感谢。



$(document).ready(function() {
  $(".attribute_list label").click(function() {
    if ($('input.attribute_radio').is(':checked')) {
      $(this).find('.group_4').addClass("gechecked");
    } else {
      $(this).find('.group_4').removeClass("gechecked");
    }
  });
});

<div class="attribute_list">
  <ul>
    <li>
      <label><div class="radio" style="display: none;"><span class="checked"><input style="display:none !important" type="radio" class="attribute_radio" name="group_4" value="25"></span></div>
																<span class="group_4 gechecked">Graniet</span></label>
    </li>
    <li>
      <label><div class="radio" style="display: none;"><span class=""><input style="display:none !important" type="radio" class="attribute_radio" name="group_4" value="26" checked="checked"></span></div>
																<span class="group_4 gechecked">Composiet</span></label>
    </li>
  </ul>
</div>
&#13;
&#13;
&#13;

3 个答案:

答案 0 :(得分:1)

这是fiddle

jQuery(document).ready(function($) {
  $(".attribute_list label").click(function() {
    $('.group_4').removeClass("gechecked");
    if ($('input.attribute_radio').is(':checked')) {
      $(this).find('.group_4').addClass("gechecked");
    }
  });
});

答案 1 :(得分:0)

试试这段代码:

    $(document).ready(function() {
      $(".attribute_list label").click(function() {
        $(this).find('.group_4').removeClass("gechecked");          
        $('input.attribute_radio:checked').parent().parent().parent().find('.group_4').addClass("gechecked");
      });
    });

答案 2 :(得分:0)

jQuery(document).ready(function($) {
  $(".attribute_list label").click(function() {
    $('.group_4').removeClass("gechecked");
    if ($('input.attribute_radio').is(':checked')) {
      $(this).find('.group_4').addClass("gechecked");
    }
  });
});