下面的 HTML 显示了单选按钮,下面的 DIV 显示了根据每个单选按钮的单击功能将出现的内容:
<ul>
<li id="6"><input type="radio" name="sell" value="sell" id="sell" />Sell</li>
<li id="7"><input type="radio" name="rent" value="rent" id="rent" />Rent</li>
<li id="8"><input type="radio" name="donate" value="donate" id="donate" />Donate</li>
</ul>
<div id="selltab">
eeeeeeeee
</div>
<div id="renttab">
ffffffffff
</div>
<div id="donatetab">
ggggggggg
</div>
下面显示的 JavaScript 函数工作正常,并且在单击其他单选按钮时会隐藏内容,但问题是即使当时未选择 div 中的其他内容,所有单选按钮也会显示为选中状态。
需要取消选中剩余的两个单选按钮,当选择其中一个时,可以吗?
$(document).ready(function(){
$('#selltab').hide();
$('#renttab').hide();
$('#donatetab').hide();
$('input[name=sell]').click(function(){
$('#selltab').toggle();
$('#renttab').hide();
$('#donatetab').hide();
$('rent').checked = false;
$('donate').checked = false;
})
$('input[name=rent]').click(function(){
$('#renttab').toggle();
$('#selltab').hide();
$('#donatetab').hide();
$('sell').checked = false;
$('donate').checked = false;
})
$('input[name=donate]').click(function(){
$('#donatetab').toggle();
$('#selltab').hide();
$('#renttab').hide();
$('rent').checked = false;
$('sell').checked = false;
})
});
最佳答案
是的,当然。你可以通过两种方式做到这一点
第一个是您可以轻松地将组(设置相同的名称)设置为单选按钮,如下所示:
<ul>
<li id="6"><input type="radio" name="r1" value="sell" id="sell" />Sell</li>
<li id="7"><input type="radio" name="r1" value="rent" id="rent" />Rent</li>
<li id="8"><input type="radio" name="r1" value="donate" id="donate" />Donate</li>
</ul>
$(document).ready(function(){
$('#selltab').hide();
$('#renttab').hide();
$('#donatetab').hide();
$('input[id=sell]').click(function(){
$('#selltab').toggle();
$('#renttab').hide();
$('#donatetab').hide();
})
$('input[id=rent]').click(function(){
$('#renttab').toggle();
$('#selltab').hide();
$('#donatetab').hide();
})
$('input[id=donate]').click(function(){
$('#donatetab').toggle();
$('#selltab').hide();
$('#renttab').hide();
})
});
第二个是使用另一个 JavaScript 函数来解决您的问题,如下所示:
<ul>
<li id="6"><input type="radio" name="sell" value="sell" id="sell" onClick="checkedRadioButton(this);"/>Sell</li>
<li id="7"><input type="radio" name="rent" value="rent" id="rent" onClick="checkedRadioButton(this);"/>Rent</li>
<li id="8"><input type="radio" name="donate" value="donate" id="donate" onClick="checkedRadioButton(this);"/>Donate</li>
</ul>
function checkedRadioButton(obj){
var id = obj.name.substring(obj.name.lastIndexOf(':'));
var el = obj.form.elements;
for (var i = 0; i < el.length; i++) {
if (el[i].name.substring(el[i].name.lastIndexOf(':')) == id) {
el[i].checked = false;
}
}
obj.checked = true;
}
关于javascript - 单击任何指定的单选按钮时取消选中所有单选按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10477506/