CODEWITHSUNDEEP
javascriptjqueryjquery-events
Nabe
Nabe

Reputation: 95

Uncheck all radiobuttons when any specified one is clicked

The following HTML shows the radio buttons and the DIV below shows the content that will appear according to click function of each radio button:

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

The JavaScript function shown below, is working properly and hides the contents when clicking other radio buttons, but the problem is that all radio buttons are shown as selected even if other contents in the div are not selected then.

Need to uncheck remaining two 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;
   })

});

Upvotes: 0

Views: 1618

Answers (3)

AKZap
AKZap

Reputation: 1211

Yes, sure. you can do it in two way

First one is you can easily just make the group (setting the same name) the radio button as follow:

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

And second One is using another JavaScript function to solve your problem as follow:

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

Upvotes: 2

Jeames Bone
Jeames Bone

Reputation: 564

Try replacing your $('rent').checked = false;

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

and similar for the other 2 where necessary.

You want to access it by ID, so use #

Upvotes: 0

Johannes Lumpe
Johannes Lumpe

Reputation: 1762

What you would actually do in this case is having all radio buttons share the same name. The default behavior for radio buttons is, that only one of a group can be selected at the same time. Instead of accesing them by using

$('input[name=theName]')

like you're doing it right now, just access them by using

$('#theInputIdHere')

since you already gave them ids. With this you won't have problems to uncheck any of the radiobuttons, since by default only one will be selected at all times.

Upvotes: 0

Related Questions