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中的其他内容，所有单选按钮也会显示为选中....

需要取消选中剩余的2个单选按钮，当选择其中任何一个时，是否可以

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

Answer 2

在这种情况下，您实际要做的是让所有单选按钮共享相同的名称。单选按钮的默认行为是，只能同时选择一个组中的一个。而不是使用

访问它们

$('input[name=theName]')

就像你现在正在做的那样，只需使用

访问它们

$('#theInputIdHere')

因为你已经给了他们ID。有了这个，取消选中任何一个单选按钮都没有问题，因为默认情况下只会选择一个单选按钮。

Answer 3

尝试替换$('rent').checked = false;

$("#rent").attr("checked", false);

并且在必要时与其他2类似。

您想通过ID访问它，因此请使用＃

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

3 个答案: