我有两个单选按钮,我已经使用label
将它们更改为可点击的图像,效果很好。问题是,当一个标签被选中时,第二个标签没有被取消选中。
这是两个功能的代码:
var $radioButtons = $('input[value="2"]');
$radioButtons.click(function() {
$radioButtons.each(function() {
$(this).parent().parent().toggleClass('checked11', this.checked);
});
});
var $2radioButtons = $('input[value="5"]');
$2radioButtons.click(function() {
$2radioButtons.each(function() {
$(this).parent().parent().toggleClass('checked12', this.checked);
});
});
您需要链接单选按钮。您可以通过给它们一个name
属性来实现这一点。在这个例子中,我添加了两组单选按钮。我将jQuery函数的选择器更改为在name
属性上进行选择。对于多个元素,name
属性可以相同,而id
属性必须在整个文档中唯一。因此,在使用jQuery选择元素时,您可以利用这一点。
解决方案:
您似乎依赖于收音机的
checked
属性来切换类。要使一套收音机工作,它们必须按相同的名称分组。
在本例中,background-color
在grouped
单选按钮之间切换。绿色代表第1组,红色代表第2组。我保留了你的功能,只更改了选择器。这个解决方案中的HTML是用来处理parent().parent()
选择的。这也可以改进。jQuery的parent
接受选择器。
var $radioButtons = $('input[name="radiogaga"]');
$radioButtons.click(function() {
$radioButtons.each(function() {
$(this).parent().parent().toggleClass('checked11', this.checked);
});
});
var $2radioButtons = $('input[name="radioblabla"]');
$2radioButtons.click(function() {
$2radioButtons.each(function() {
$(this).parent().parent().toggleClass('checked12', this.checked);
});
});
.checked11 {
background-color: lime;
}
.checked12 {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<span>
<label for="radio1" >This is radio 1</label>
<input name="radiogaga" value="2" type="radio" id="radio1" />
</span>
</div>
<div>
<span>
<label for="radio2" >This is radio 2</label>
<input name="radiogaga" value="3" type="radio" id="radio2" />
</span>
</div>
<div>
<span>
<label for="radio3" >This is radio 3</label>
<input name="radioblabla" value="4" type="radio" id="radio3" />
</span>
</div>
<hr>
<div>
<span>
<label for="radio4" >This is radio 4</label>
<input name="radioblabla" value="5" type="radio" id="radio4" />
</span>
</div>