如何使用 jquery 和 ajax 选中和取消选中单选按钮？

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

提问by user3322667

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?

我正在使用 ajax 通过 select 加载动态生成的单选按钮，当我试图取消选中单选按钮时，我不知道它是如何工作的。那么有人可以帮助我吗？

Here is the Dynamically Generated HTML Code:

这是动态生成的 HTML 代码：

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>

回答by Rajkumar

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');

回答by Davidson Sousa

Here:

这里：

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

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

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

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

回答by Ankur Tiwari

Try this, its worked for me.

试试这个，它对我有用。

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

回答by olivier770

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

    $('.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 :

但这仅适用于 Firefox。我用双击来解决问题：

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

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

回答by Noel Swanson

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:

这就是 DID 对我有用的：

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