CODEWITHSUNDEEP
javascripthtmljquery
Matt
Matt

Reputation: 1119

How to toggle HTML radio button with jQuery?

I have a radio button that is checked by default. What I am trying to accomplish is just to toggle it on/off with a click and simple logic but I do not understand what I'm doing wrong.

Here is my HTML:

   <input type="radio" id="member" name="member" value="member" checked>
   <label for="member" >Member Reported</label>

And here is my jQuery:

$('#member').click((e) => {
    console.log('click')
    if($('#member').is(':checked')) { 
        $('#member').prop('checked',false)
    }
})

This works great, but I noticed that it's not changing the DOM once clicked, and furthermore, when I try to add the prop to true (like below), it's not checking back on the GUI.

Here's the DOM:

enter image description here

$('#member').click((e) => {
    console.log('click')
    if($('#member').is(':checked')) { 
        $('#member').prop('checked',false)
    } else if (!$('#member').is(':checked')) {
        $('#member').prop('checked',true)
    }
})

Upvotes: 0

Views: 343

Answers (3)

Tony Gr&#228;tscher
Tony Gr&#228;tscher

Reputation: 41

I think that's the way it should be.

$('.radios').click((e) => {
  $('.radios').each(function (i) {
    $(this).removeAttr('checked')
  })
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" id="member" class="radios" name="member" value="member" >
<label for="member" >Member Reported</label><br/>
<input type="radio" id="member2" class="radios" name="member" value="member" >
<label for="member2" >Member Reported2</label><br/>
<input type="radio" id="member3" class="radios" name="member" value="member" checked>
<label for="member3" >Member Reported3</label><br/>

Upvotes: 0

Saharsh
Saharsh

Reputation: 1098

As long checked exist in element, it will stay checked. You will have to remove it via jquery to make it work.

You can check functioning here.

<input type="radio" checked>
<br>
<input type="radio" checked="true">
<br>
<input type="radio" checked="false">
<br>
<input type="radio">

Upvotes: 0

coding monster
coding monster

Reputation: 394

How about this? Is this what you are willing?

$('#member + label').click((e) => {
    console.log($('#member')[0].checked);
    if($('#member')[0].checked) { 
        $('#member')[0].checked = false;
    } else{
        $('#member')[0].checked = true;
    }
   
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" id="member" name="member" value="member" checked >
   <label for="" >Member Reported</label>

Upvotes: 1

Related Questions