0

下面的 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 中的其他内容没有被选中......

Need to uncheck remaining 2 radio button,when either one is selected, is it possible

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

});
4

3 回答 3

2

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

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

<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;
}
于 2012-05-07T06:34:17.677 回答
0

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

$('input[name=theName]')

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

$('#theInputIdHere')

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

于 2012-05-07T06:31:58.940 回答
0

尝试更换你的$('rent').checked = false;

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

必要时对其他 2 个类似。

你想通过 ID 访问它，所以使用 #

于 2012-05-07T06:32:11.003 回答