[英]jQuery toggle background color on radio buttons
我有两个设计为按钮的无线电控件。 当我单击第一个单选按钮时,第二个的背景颜色应该改变,反之亦然。
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');
}
如果你想在“非活动”时按钮有不同的背景颜色,你可以使用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");
});
});
见工作jsFiddle 。
尝试以下代码
$("#boo1").click(function (event) {
$("#boo2").prop( "checked",true );
});
$("#boo2").click(function (event) {
$("#boo1").prop( "checked",true );
});
尝试使用此JavaScript代码
$(document).ready(function () {
$("input[name='boo']").click(function () {
$(this).next().removeAttr('style');
$("input[name='boo']").not(this).next().css('background-color', 'green');
});
});
试试这种方式
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 CODE:
$('input[type=radio]').on('click', function () {
$('input[type=radio]').not(this).closest('label').css('background', 'blue');
$(this).closest('label').css('background', 'red');
});
现场演示:
您可以使用纯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/
希望这就是你要找的!
简单优化的解决方案:
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');
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.