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

【问题标题】：How to check and uncheck radio buttons with jquery and ajax?如何使用 jquery 和 ajax 选中和取消选中单选按钮？
【发布时间】：2020-08-03 03:25:33
【问题描述】：

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

这是动态生成的 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>

【问题讨论】：

你应该在 google 上搜索到一些结果...当心带点的 ID 无效
@A.Wolff: “注意带点的 ID 无效” 是的，它是：w3.org/TR/html5/dom.html#the-id-attribute HTML 中对 ID 的唯一限制是它们不能包含空格。 CSS 对 ID 选择器 施加了进一步的限制（例如不允许选择器中的 ID 以数字开头），但如果您不使用 CSS ID 选择器，则无关紧要。
例如，this script updating an element with a dot in its id 可以在您想尝试的任何浏览器中运行。:-)
@T.J.Crowder 确定这在 HTML5 中有效，但在 CSS 中无效。所以，我们应该遵循 CSS 规范还是 HTML5 规范，更好的是两者都适合，恕我直言。对于以数字开头的 ID，这也是一样的，对我来说，仍然无效。像往常一样，感谢您的反馈，一直很感激；）
@A.Wolff：我坚持 ID 的 CSS 规则，因为我可能想对它们使用 CSS 选择器。但如果您不是，那么使用您可用的所有 ID 并没有什么不妥。

标签： jquery radio-button

【解决方案1】：

使用这些语句来选中/取消选中单选按钮

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

如果您想知道单选按钮是否已被选中，请使用此语句

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

【讨论】：

【解决方案2】：

这里：

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

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

【讨论】：

【解决方案3】：

试试这个，它对我有用。

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

【讨论】：

【解决方案4】：

使用此代码，您可以轻松地选中和取消选中您的单选按钮：

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

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

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

【讨论】：

【解决方案5】：

其他解决方案都不适合我——它们确实改变了单选集的值，但没有改变视觉显示，即“checked”属性确实被删除了，但用户仍然看到单选按钮被选中。

这对我来说确实有效：

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

【讨论】：