jquery - 再次单击删除课程

Question

我必须额外的样式单选按钮，所以我创建了跨度和添加类，但是在单击另一个单选标签后我无法删除 aktiv 类这是我的代码：

$('.attribute_wrapper div label').click(function(){
    var selectedLabel = $(this).attr('id');
    if($('#' + selectedLabel).data('clicked', true)) {
        $('.attribute_wrapper div #' + selectedLabel + ' span').addClass('radioclicked');
    } else {
        $('.attribute_wrapper div label span').removeClass('radioclicked');
    }
});

我不明白，我的else语句有什么问题？

标记：

<div class="attribute_wrapper">
    <div class="attribute_multiselect_single">
        <label id="lblID1">
            <span class="radiobutton">&nbsp;</span>
            <input type="radio" checked="" value="1384" name="color_white" id="color_white103" required="0">White
        </label>
    </div>
</div>

Answer 1

你可以用toggleClass()这个

尝试这个

 $('.attribute_wrapper div label').click(function(){
     $(this).find('span').toggleClass('radioclicked');
 });

Answer 2

改变它从

$('.attribute_wrapper div label').click(function(){
    var selectedLabel = $(this).attr('id');
    if($('#' + selectedLabel).data('clicked', true)) {
        $('.attribute_wrapper div #' + selectedLabel + ' span').addClass('radioclicked');
    } else {
        $('.attribute_wrapper div label span').removeClass('radioclicked');
    }
});

至

$('.attribute_wrapper div label').click(function(){
    $('.attribute_wrapper div label span').removeClass('radioclicked');
    $(this).find('span').addClass('radioclicked');
});

radioclicked这将从任何其他类中删除所有类spans，然后将其应用于您刚刚单击的类

Answer 3

您可以设置单选框和复选框的样式

HTML：

<input type="radio" name="blop" value="0" id="blop0">
<label for="blop0"></label>

<input type="radio" name="blop" value="0" id="blop1">
<label for="blop1"></label>

<input type="radio" name="blop" value="0" id="blop2">
<label for="blop2"></label>

CSS：

/* Hide the input */
input[type="radio"] {
    clip: rect(0, 0, 0, 0); /* W3C */
    clip: rect(0 0 0 0); /* IE */

    position: absolute;
}

/* Style the label */
input[type="radio"] + label {
    color: #333;
}

/* Style the label for selected radio */
input[type="radio"]:checked + label {
    color: #f33;
}

看到这个小提琴jsfiddle.net/9u5wW/