javascript - 使用 JQuery 更改 RadioBox 的 `checked` 状态后未提交

Question

我有一个包含多个单选框的表单，我根据用户交互更改其选中状态。

当我加载页面并在不更改任何内容的情况下提交它时，POST 请求会携带选中的单选框的值，但是当我在特定用户行为后使用 JQuery 更改状态时，更改后的单选框的值不会被提交。

<input checked="checked" name="resident" type="radio" value="no">
<input name="resident" type="radio" value="yes">

我正在使用以下函数来更改状态:

$('[data-toggle="section-radio"]').click(function(){
    section = $(this).closest('.tab-pane');
    section.find('[data-toggle="section-radio"]').removeClass('active');
    $(this).addClass('active');
    $(section).find('[type="radio"]').removeAttr('checked');
    $(this).find('[type="radio"]').attr('checked','true');
});

执行此操作后，单选框将更改如下:

<input name="resident" type="radio" value="no">
<input name="resident" type="radio" value="yes" checked="checked">

我必须刷新 DOM 还是应该以其他方式更改 checked 值？

编辑

我正在使用普通的提交按钮:

<input type='submit' class='btn btn-finish btn-fill btn-warning btn-wd btn-sm' name='finish' value='save' />

Answer 1

您应该使用 prop 而不是 attr。 Attr 指的是默认值，而 prop 指的是当前值。

参见:http://api.jquery.com/prop/

此外，如果您希望取消选中它，只需将其设置为 false 即可。

所以你的代码将如下所示:

$('[data-toggle="section-radio"]').click(function(){
    section = $(this).closest('.tab-pane');
    section.find('[data-toggle="section-radio"]').removeClass('active');
    $(this).addClass('active');
    $(section).find('[type="radio"]').prop('checked', false);
    $(this).find('[type="radio"]').prop('checked', true);
});