CODEWITHSUNDEEP
jqueryradio-button
user3322667
user3322667

Reputation: 41

How to check and uncheck radio buttons with jquery and ajax?

I am loading dynamically generated radio buttons using the ajax by select and while I am trying to uncheck the radio button, I don't know how it works. So can anyone help me in this?

Here is the Dynamically Generated HTML Code:

enter code here
<table cellepadding='15' cellspacing='15' border='1' class='gridtable' align='center'>
<tr>
<td><strong>Service Name</strong></td>
<td><strong>Daily</strong>
<td><strong>Weekly</strong></td>
<td><strong>BiMonthly</strong></td>
<td><strong>Monthly</strong></td>
</tr>

<tr>
<td>Inspection & Reporting</td>
<td>NA</td>
<td align="center">
<input type="radio" id="215" name="1" value="1/215" onclick="DisplayPrice(this.id);" class="radio"/> <br> Rs. <strong>50</strong></td>
<td><input type="radio" id="200" name="1" value="2/200" onclick="DisplayPrice(this.id);" class="radio"/>  <br> Rs. <strong>100</strong></td>
<td align="center"><input type="radio" id="200" name="1" value="3/200" onclick="DisplayPrice(this.id);" class="radio"/> <br> Rs. <strong>200</strong></td>
</tr>

<tr>
<td>House keeping/Cleaning</td>
<td>NA</td>
<td align="center"><input type="radio" id="322.5" name="2" value="7/322.5" onclick="DisplayPrice(this.id);" class="radio"/> <br> Rs. <strong>75</strong></td>
<td><input type="radio" id="300" name="2" value="8/300" onclick="DisplayPrice(this.id);" class="radio"/>  <br> Rs. <strong>150</strong></td>
<td align="center"><input type="radio" id="300" name="2" value="9/300" onclick="DisplayPrice(this.id);" class="radio"/> <br> Rs. <strong>300</strong></td>
</tr>

<tr>
<td>Utility Bill Payment</td>
<td>NA</td>
<td align="center"><input type="radio" id="258" name="3" value="14/258" onclick="DisplayPrice(this.id);" class="radio"/> <br> Rs. <strong>60</strong></td>
<td><input type="radio" id="240" name="3" value="15/240" onclick="DisplayPrice(this.id);" class="radio"/>  <br> Rs. <strong>120</strong></td>
<td align="center"><input type="radio" id="250" name="3" value="13/250" onclick="DisplayPrice(this.id);" class="radio"/> <br> Rs. <strong>250</strong></td>
</tr>

<tr>
<td>Plumbing Inspection</td>
<td>NA</td>
<td align="center"><input type="radio" id="129" name="4" value="19/129" onclick="DisplayPrice(this.id);" class="radio"/> <br> Rs. <strong>30</strong></td>
<td><input type="radio" id="120" name="4" value="20/120" onclick="DisplayPrice(this.id);" class="radio"/>  <br> Rs. <strong>60</strong></td>
<td align="center"><input type="radio" id="240" name="4" value="21/240" onclick="DisplayPrice(this.id);" class="radio"/> <br> Rs. <strong>240</strong></td>
</tr>

</table>

Upvotes: 0

Views: 38967

Answers (5)

Noel Swanson
Noel Swanson

Reputation: 351

None of the other solutions worked for me - they did change the value of the radio set, but did NOT change the visual display, ie the attribute 'checked' was, indeed, removed, but the user still saw the radio button as selected.

This is what DID work for me:

$("#radioID").prop("checked", false);

Upvotes: 0

olivier770
olivier770

Reputation: 1

With this code, you check and uncheck your radio button easily :

    $('.btnRadio').bind('change', function() {
        $(this).attr('checked','checked');
    });
    $('.btnRadio').bind('click', function() {
        $(this).removeAttr('checked');
    });

But this work only for Firefox. I use the double click to solve the problem :

    $('.btnRadio').on('dblclick', function() {
        $(this).removeAttr('checked');
    });

Upvotes: 0

Ankur Tiwari
Ankur Tiwari

Reputation: 2782

Try this, its worked for me.

document.getElementById('Usertype1').checked = true;

Upvotes: 0

Davidson Sousa
Davidson Sousa

Reputation: 1353

Here:

$("input:checked").removeAttr("checked");

http://davidsonsousa.net/en/post/how-to-clear-checkboxes-and-radio-buttons-using-jquery

Upvotes: 4

Rajkumar
Rajkumar

Reputation: 98

Use these statements to check/uncheck radio buttons

    $('#radioID').attr('checked', true) - Check the radio button which has ID "radioID"
    $('#radioID').attr('checked', false) - This is to uncheck the radio button

Use this statement if you want to know whether the radio button is already checked

    var checked = $('#radioID').attr('checked');

Upvotes: 6

Related Questions