Question

我必须使用额外的样式单选按钮，所以我创建了span并添加了类，但是我点击另一个单选标签后无法删除的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/

在另一次单击时删除类

3 个答案: