提交表单时复选框未被选中

Question

我不确定在使用.click()函数而非.change()函数来处理复选框时，是否存在jQuery的漏洞。它在jsfiddle上运行良好 1: http://jsfiddle.net/fadlisaad/tSgbZ/16/ ，但在实际页面http://webcollect.viewscast.com/canonrepairmobile上却不能正常工作。

您可以使用以下步骤进行测试：

1. 语言 > 英语
2. 国家 > 英国
3. 点击“继续”
4. 选择任何选项并单击“继续”以回答下3个问题，直到找到问题“在修复产品之前，您采取了哪些步骤来尝试解决问题？”
5. 尝试选择最后一个选项“以上都没有”，然后单击继续。在加载到下一个问题时，选中的选项会神秘地取消选中，因此如果您查看下一页的源代码，则会发现 <INPUT TYPE="Hidden" ID="__OUTP__ResolveWay_7" NAME="__OUTP__ResolveWay_7" VALUE=""> 应该是 <INPUT TYPE="Hidden" ID="__OUTP__ResolveWay_7" NAME="__OUTP__ResolveWay_7" VALUE="1">


其他复选框正常工作。有人能想出为什么吗？

- Fadli Saad

Answer 1

使用以下代码：

$('input[name!="ResolveWay_7"]').click(function() {
    $('input[name="ResolveWay_7"]').removeAttr('checked');
});

您需要做的是每次点击输入框时，都要取消复选框的选择。因此，当单击提交按钮（是的，那也是一个输入）时，它将取消选中复选框。

我相信您只需要更改选择器为$('input[type="checkbox"][name!="ResolveWay_7"]')，它就可以工作了。

- deviousdodo

---

那么，在使用click()或change()函数时有任何不同吗？在这种情况下，它们对我来说似乎是相同的。 - Fadli Saad

点击和更改之间存在差异（例如，您可以单击已选择的元素，它不会更改），但这不会影响您遇到问题的行为。 - deviousdodo

Answer 2

问题出在这段代码：

$('input[name!="ResolveWay_7"]').click(function() {
    $('input[name="ResolveWay_7"]').removeAttr('checked');
});

您的继续按钮也将满足jQuery选择器，因为它是<input>类型，并且未命名为ResolveWay_7。因此，当单击“继续”按钮时，它将取消选中复选框。

- Sir Crispalot

Answer 3

请查看选择“None of the above”的页面源代码底部。

<script type="text/javascript"> 
/* <![CDATA[ */
$(document).ready(function() {
    $('#comment').hide();
    $('#specify').click(function() {
        $('#comment').toggle();
        $('textarea').val('');
    });
    $('input[name="ResolveWay_7"]').change(function() {
        $('input[name!="ResolveWay_7"]').removeAttr('checked');
        $('textarea').val('');
        $('#comment').hide();
    });
    $('input[name!="ResolveWay_7"]').click(function() {
        $('input[name="ResolveWay_7"]').removeAttr('checked');
    });
});
/* ]]> */
</script>

有2个地方说到：

$('input[name="ResolveWay_7"]').removeAttr('checked');

- James

---

是的，这是用来实现如果我们选中“None of this”，所有其他复选框都将取消选择的，@Chris是正确的。 - Fadli Saad

@FadliSaad：是的。我在反驳詹姆斯的说法，即有两个地方会从该输入中删除已检查属性。就像你所说的，一个是从该输入中删除它，另一个是从所有其他输入中删除它。 - Chris

Answer 4

请检查这个：

$('input[name!="ResolveWay_7"]').click(function() {
    $('input[name="ResolveWay_7"]').removeAttr('checked');
});

当您点击除ResolveWay_7之外的任何输入时，它会清除它(Resolveway_7)的checked属性，提交按钮(继续)也是一个输入，因此点击它将清除复选框。 您需要从选择中排除按钮，例如:

$('input[name!="ResolveWay_7"]').not("input.myButton").click(.......);

- TheVillageIdiot

---

如果我使用除了<input type="button">之外的其他内容，这应该没问题吧？比如<button>..</button>。 - Fadli Saad