Question

我正在为我的应用程序尝试不同类型的审核系统。我有5个radiobuttons，值为1到5，每个值代表一种颜色。

如果用户要观看电影“蝙蝠侠：黑暗骑士”，它会看起来像这样：

enter image description here

当用户点击某个值时，它会更改背景颜色。我正在使用jQuery来控制它。

问题是什么：用户应该只能选择一个值，并且只有该值应该更改背景颜色，现在您更改单击任何值并更改其背景颜色。

我如何在jQuery中做到这一点，欢迎任何提示或想法！

以下是jsfiddle的一个例子：http://jsfiddle.net/puWJZ/

HTML：

<label class="input-check ch1">
 <input id="#rb1" type="radio" value="1"   name="reviewbutton" /> Bad
</label>
<label class="input-check ch2">
 <input id="#rb2" type="radio" value="2"   name="reviewbutton" /> Acceptable
</label>
<label class="input-check ch3">
 <input id="#rb3" type="radio" value="3"   name="reviewbutton" /> Good
</label>
<label class="input-check ch4">
 <input id="#rb4" type="radio" value="4"   name="reviewbutton" /> Very good
</label>
<label class="input-check ch5">
 <input id="#rb5" type="radio" value="5"   name="reviewbutton" /> Excellent
</label>
<div class="box">POP UP!</div>

CSS：

.input-check {
    display: block;
    height:20px;
    padding:10px;
    width:90px;
    color:#EEEEEE;
    font-weight: 600;
    text-align: center;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    background-color: #333333;
    margin:10px;
    cursor: pointer;
}
input {
    display:none;
}
.ch1:hover{background-color: #ba0012; cursor: pointer;}
.ch2:hover{background-color: #ba0099; cursor: pointer;}
.ch3:hover{background-color: #00ba88; cursor: pointer;}
.ch4:hover{background-color: #0bbdf0; cursor: pointer;}
.ch5:hover{background-color: #f0b10b; cursor: pointer;}

jQuery的：

$(document).ready(function(){
    $('.box').hide();
    /* Bad */
    $('.ch1').click(function(){
        $(this).css({'background-color' : '#ba0012'});
        $('.box').show();
    });
    /* Acceptable */
    $('.ch2').click(function(){
        $(this).css({'background-color' : '#ba0099'});
        $('.box').show();
    });
    /* Good */
    $('.ch3').click(function(){
        $(this).css({'background-color' : '#00ba88'});
        $('.box').show();
    });
    /* Very good */
    $('.ch4').click(function(){
        $(this).css({'background-color' : '#0bbdf0'});
        $('.box').show();
    });
    /* Excellent */
    $('.ch5').click(function(){
        $(this).css({'background-color' : '#f0b10b'});
        $('.box').show();
    });
});

Answer 1

要重置其余元素的颜色，只需前缀：

$('.input-check').css('background-color',"");

到您的所有活动处理程序。

以下是演示：http://jsfiddle.net/puWJZ/1/

或者，您可以将此事件侦听器添加到代码的末尾：

$('.input-check').click(function(){
    $('.input-check').not(this).css('background-color',"");
});

以下是替代方法的演示：http://jsfiddle.net/puWJZ/3/

Answer 2

我真的不喜欢你这样做的方式，你不需要为每个标签创建一个函数。但我认为你想要做的是使用jQuery not selector让我建议你更好的方法来做到这一点：

$(document).ready(function(){
    var myColors=new Array('#ba0012', '#ba0099', '#00ba88', '#0bbdf0', '#f0b10b');
    $('.box').hide();
    $('.input-check').click(function(){        
        $(this).css({'background-color' : myColors[$('.input-check').index($(this))]});
        $('.input-check').not($(this)).css({'background-color' : ''});
        $('.box').show();
    });
});

http://jsfiddle.net/puWJZ/7/

Answer 3

我会完全删除内联CSS并在按钮上切换类。您已经拥有:hover样式中的所有CSS颜色，只需添加选择器以包含active类将使其更加清晰，因为删除类比存储和还原内联css要简单得多

CSS示例

.ch1:hover, .ch1.selected {background-color: #ba0012; cursor: pointer;}

JS改变类：

$('.input-check').click(function(){
   $('.input-check.selected').removeClass('selected');
   $(this).addClass('selected');

     /* other code when clicked*/
})

Answer 4

正如其他答案所提到的，一定要使用一段代码来处理所有按钮的click事件。在这里，我将 bgcolor 添加为每个单选按钮的自定义属性：

<input id="#rb1" type="radio" value="1"   name="reviewbutton" bgcolor="#ba0012"/> Bad

我还在所有输入标签上添加了一个类：

<label class="input-check ch1 rating_item">

然后我们检查是否点击了这些元素中的任何一个，从自定义属性中获取bgbolor并将其设置在单击的元素上（并重置所有其他元素）

$(document).ready(function(){
    $('.box').hide();
    $('.rating_item').click(function(){
        $('.rating_item').each(function(){
            $(this).css("background-color","#333333");
        });
        var this_bg_color = $(this).children().attr("bgcolor");
        $(this).css('background-color',this_bg_color);
        $('.box').show();
    });
});

http://jsfiddle.net/UxyWq/3/

Answer 5

这是将所有其他颜色更改回原始颜色的基本方法。

$('.ch2, .ch3, .ch4, .ch5').css({'background-color' : '#333'});

http://jsfiddle.net/puWJZ/5/

Answer 6

使用类标记标签并设置与hover css相同的类

的CSS：

.ch1:hover,.ch1.checked{background-color: #ba0012; cursor: pointer;}
.ch2:hover,.ch2.checked{background-color: #ba0099; cursor: pointer;}
.ch3:hover,.ch3.checked{background-color: #00ba88; cursor: pointer;}
.ch4:hover,.ch4.checked{background-color: #0bbdf0; cursor: pointer;}
.ch5:hover,.ch5.checked{background-color: #f0b10b; cursor: pointer;}

JS：

$(document).ready(function() {
    $('.box').hide();
    $('label.input-check input').click(function(e) {
        e.stopPropagation();
        $('label.input-check').removeClass('checked');
        //the reason for next string it is just to make same code compatible with checkboxes
        //if not needed it ok to set $(this).parent().addClass('checked');
        $('label.input-check input:checked').parent().addClass('checked');
    });
    $('label.input-check').click(function(e) {
        var $t = $(this);
        if ($t.attr('type') == 'radio') {
            return true;
        }
        $t.children().first().click();
    });
});

demo

<小时/> 另一种解决方法是使输入与父级相同，并将不透明度设置为0：

JS：

$(document).ready(function() {
    $('.box').hide();
    $('label.input-check input').click(function(e) {
        $('label.input-check').removeClass('checked');
        //the reason for next string it is just to make same code compatible with checkboxes
        //if not needed it ok to set $(this).parent().addClass('checked');
        $('label.input-check input:checked').parent().addClass('checked');
    });

});

在css中删除输入并设置：

label.input-check input {
    width: 100%;
    height: 100%;
    opacity: 0;
    position: absolute;
}
.ch1:hover,.ch1.checked{background-color: #ba0012; cursor: pointer;}
.ch2:hover,.ch2.checked{background-color: #ba0099; cursor: pointer;}
.ch3:hover,.ch3.checked{background-color: #00ba88; cursor: pointer;}
.ch4:hover,.ch4.checked{background-color: #0bbdf0; cursor: pointer;}
.ch5:hover,.ch5.checked{background-color: #f0b10b; cursor: pointer;}

demo2

如何在jQuery中选择一个元素

6 个答案: