jQuery在单选按钮上切换背景颜色答案

【问题标题】：jQuery toggle background color on radio buttonsjQuery在单选按钮上切换背景颜色
【发布时间】：2014-03-04 05:32:45
【问题描述】：

我有两个设计为按钮的单选控件。当我单击第一个单选按钮时，第二个单选按钮的背景颜色应该改变，反之亦然。

HTML：

<input type="radio" id="boo1" name="boo" value="boo1"><label for="boo1"><span></span>boo1</label>
<input type="radio" id="boo2" name="boo" value="boo2"><label for="boo2"><span></span>boo2</label>

CSS：

body {
font-family: open sans, arial, sans-serif;
color: #ffffff;
margin: 0;
background: #3894db;
}
input[type="radio"] {
display: none;
}
input[type="radio"] + label {
cursor: pointer;
width: 50%;
height: auto;
font-size: 22px;
margin-top: 10px;
float: left;
color: #ffffff;
text-align: center;
vertical-align: middle;
padding-top: 2px;
padding-bottom: 2px;
}
/* boo1 */
#boo1 + label {
background: #e74c3c;
}
#boo1:checked + label {
background: #c0392b;
}
/* boo2 */
#boo2 + label {
background: #f1c40f;
}
#boo2:checked + label {
background: #f39c12;
}

JavaScript？

$(document).ready(function() {
$("#boo1").click(function () {

});
});

【问题讨论】：

你能说得更具体点吗？每个按钮的背景应该是什么颜色？
它在我给出的样式示例中说明了每个背景的颜色。我不在乎颜色是什么，因为我可以改变它。我只需要一个代码，当单击一个单选按钮时，它会改变另一个单选按钮的颜色。

标签： javascript jquery html css radio-button

【解决方案1】：

if($('#boo1').is(':checked'))
{
     $('#boo2').css('color','#ff0000');
}

【讨论】：

这似乎不起作用。我认为它会，我试过了，除了使用'color
我已经更新了答案，请通过jQuery试试；并确保在选中单选按钮时控件达到此 sn-p。

【解决方案2】：

如果希望按钮在“非活动”时具有不同的背景颜色，可以使用 jQuery 的css() 函数，如下所示：

$(document).ready(function () {
    $("#boo1").click(function () {
        $("#boo1 + label").css("background-color", "#c0392b");
        $("#boo2 + label").css("background-color", "green");
    });
    $("#boo2").click(function () {
        $("#boo2 + label").css("background-color", "#f39c12");
        $("#boo1 + label").css("background-color", "blue");
    });
});

见working jsFiddle。

【讨论】：

【解决方案3】：

试试下面的代码

$("#boo1").click(function (event) {

                $("#boo2").prop( "checked",true );
            });

            $("#boo2").click(function (event) {

                $("#boo1").prop( "checked",true );
            });

【讨论】：

【解决方案4】：

尝试使用这个 javascript 代码

$(document).ready(function () {
    $("input[name='boo']").click(function () {
        $(this).next().removeAttr('style');
        $("input[name='boo']").not(this).next().css('background-color', 'green');
    });
});

【讨论】：

【解决方案5】：

试试这个方法

HTML 代码：

      <label for="boo1"><span><input type="radio" id="boo1" name="boo" value="boo1" /></span>boo1</label>
      <label for="boo2"><span><input type="radio" id="boo2" name="boo" value="boo2" /></span>boo2</label>

JQUERY 代码：

        $('input[type=radio]').on('click', function () {
             $('input[type=radio]').not(this).closest('label').css('background', 'blue');
             $(this).closest('label').css('background', 'red');
        });

现场演示：

快乐编码 :) http://jsfiddle.net/dreamweiver/py2BM/14/

【讨论】：

【解决方案6】：

你可以用纯 CSS 实现这一点

/* boo1 */
#boo1 + label {
background: #e74c3c;
}
#boo1:checked ~ label[for="boo2"] {
background: #c0392b;
}
#boo1:checked ~ label[for="boo1"]{
    background: #f39c12;
}
/* boo2 */
#boo2 + label {
background: #f1c40f;
}
#boo2:checked ~ label[for="boo1"] {
background: #f39c12;
}

工作演示：http://jsfiddle.net/HarishBoke/S6z8Z/

希望这就是你要找的东西！

【讨论】：

【解决方案7】：

简单优化的解决方案：

HTML 代码：

<!-- Fieldset Wrap: begins -->
<div class="fieldset-wrap">

    <!-- Fieldset: begins -->
    <span class="fieldset orange">
        Label 1
    </span>
    <!-- Fieldset: ends -->

    <!-- Fieldset: begins -->
    <span class="fieldset green">
       Label 2
    </span>
    <!-- Fieldset: ends --> 

</div>
<!-- Fieldset Wrap: ends -->

CSS：

.fieldset-wrap {
    overflow: hidden; 
    font-size:0px;
}

.fieldset { 
    display: inline-block; 
    width: 200px;
    padding: 5px 0;
    text-align: center;
    cursor: pointer;
    font-family: verdana;
    font-size: 14px;
 }

.fieldset { margin-left: 1px; }
.fieldset:first-child { margin-left: 0px; }

.orange,
.green,
.checked{ color: #fff; }

.orange { background-color : orange; }
.green { background-color : green; }
.checked { background-color : blue; }

jQuery：

$('.fieldset').on('click', function(){
    $(this)  
    .addClass('checked')
    .siblings()
    .removeClass('checked');
});

DEMO

【讨论】：