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

uz75evzq 于 2023-01-29 发布在 Java

关注(0)|答案(3)|浏览(187)

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

});

JavaScript

来源：https://stackoverflow.com/questions/10477506/uncheck-all-radiobuttons-when-any-specified-one-is-clicked

3条答案

按热度按时间

pftdvrlh1#

是的，当然可以.你可以用两种方法做
第一个是你可以很容易地使组（设置相同的名称）单选按钮如下：

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

赞(0）回复(0）举报 2023-01-29

cl25kdpy2#

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