javascript - 单击任何指定的单选按钮时取消选中所有单选按钮

Question

下面的 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;
   })

});

Answer 1

是的，当然。你可以通过两种方式做到这一点

第一个是您可以轻松地将组(设置相同的名称)设置为单选按钮，如下所示:

<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;
}