javascript - jQuery 在单选按钮上切换背景颜色

标签 javascript jquery html css radio-button

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

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 () {

});
});

最佳答案

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

关于javascript - jQuery 在单选按钮上切换背景颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22163706/

相关文章:

javascript - 如何用jquery裁剪图像?

html - 4个div中不同大小的文本

javascript - 一页上的 Jquery 冲突

html - 我的粘性页脚有问题吗?

html - 错误的 html DIV 宽度

javascript - 模态叠加处于事件状态时聚焦到弹出输入

javascript - jquery - 当服务器返回 500 时,XMLHttpRequest 对象中的响应文本为空

c# - 将数据数组从 Javascript 传递到 C#

javascript - 这个陈述会评估为真吗?

jquery - Rails 3/Kaminari/JQuery - 加载更多按钮 : problem to display results (it loads the entire page layout and not only the partial layout)