Javascript 取消选中时,如何重置单选按钮父项的背景?
我在表格中创建了一组单选按钮,如Javascript 取消选中时,如何重置单选按钮父项的背景?,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我在表格中创建了一组单选按钮,如 <table cellpadding="0" cellspacing="0" border="0"> <tbody> <tr> <td> <input type="radio" name="radios" id="8-9" /> <label for="8-9">08-09
<table cellpadding="0" cellspacing="0" border="0">
<tbody>
<tr>
<td>
<input type="radio" name="radios" id="8-9" />
<label for="8-9">08-09 am</label>
</td>
</tr>
<tr>
<td>
<input type="radio" name="radios" id="9-10" />
<label for="9-10">09-10 am</label>
</td>
</tr>
</tbody>
</table>
此代码正在工作,当单击“收音机”时,父对象的背景会更改,但当取消选中“收音机”时,父对象的背景不会重置为默认值。我的脚本中是否有任何错误或其他错误?请检查:
首先,您必须重置单选按钮父项的css,然后设置要选中的内容
$('input[name=radios]').on('change', function() {
$('input[name=radios]').parent().css("background-color", "#ff0000");
$('input[name=radios]').parent().css("color", "#fff");
$(this).parent().css("background-color", "#000");
$(this).parent().css("color", "#fff");
});
问题是,您的绑定将单独绑定到单选按钮,因此单击只发生一次。试试这个
var selected = null;
$(document).on("click", "input[type='radio']", function(){
if(selected != null){
selected.parent().css({backgroundColor:"white", color:"black"});
}
$(this).parent().css({backgroundColor:"black", color:"white"});
selected = $(this);
})
您可以像下面这样优化代码
$(document).on('change', '.radioBtn', function (event) {
$('.radioBtn').parent().css("background-color", "#FFF").css("color", "#000");
$(this).parent().css("background-color", "#000").css("color", "#fff");
});
然后像这样修改HTMl
<table cellpadding="0" cellspacing="0" border="0">
<tbody>
<tr>
<td>
<input type="radio" name="radios" id="8-9" class="radioBtn" />
<label for="8-9">08-09 am</label>
</td>
</tr>
<tr>
<td>
<input type="radio" name="radios" id="9-10" class="radioBtn"/>
<label for="9-10">09-10 am</label>
</td>
</tr>
</tbody>
</table>
上午八时至九时
上午9时至10时
检查这个
您需要根据需要修改颜色代码。首先,您不应该以数字开头id名称。。。它很可能会引起问题…关于最后一个问题,我有点困惑。这是真的吗?我不太确定你到底想实现什么,但是严格遵循你的代码和场景是一件很难的事——你可能会发现你需要在这里重新构造你的逻辑
<table cellpadding="0" cellspacing="0" border="0">
<tbody>
<tr>
<td>
<input type="radio" name="radios" id="8-9" class="radioBtn" />
<label for="8-9">08-09 am</label>
</td>
</tr>
<tr>
<td>
<input type="radio" name="radios" id="9-10" class="radioBtn"/>
<label for="9-10">09-10 am</label>
</td>
</tr>
</tbody>
</table>