Question

我有一个动态创建的基本表单。我提交表单时遇到问题，一瞬间，所有复选框都被选中....有谁知道为什么会发生这种情况？这是正常的吗？表单提交正常，但是当用户点击投票并突然看到所有复选框都被选中时，它会变得混乱。（注意这里可能只有一点点c＃。）

它在创建时看起来像这样：

<form action="/en/OnlineServices/SomeService" method="post">        
<div id="voters">
   <label><input type="checkbox" class="votebox" value="Some Name">Some Name<br></label>
<label><input type="checkbox" class="votebox" value="Some Name">Some Name<br></label>
<label><input type="checkbox" class="votebox" value="Some Name">Some Name<br></label>
<label><input type="checkbox" class="votebox" value="Some Name">Some Name<br></label>
</div>
<input id="VoteSubmit" type="submit" value="Vote">
    <span style="margin-left: -9999px;"><input id="Vote" name="Vote" type="text" value=""></span>
    <span style="margin-left: -9999px;"><input id="Language" name="Language" type="text" value=""></span>

和JS

 <script>
$(document).ready(function () {
    $("input#Vote").val("")
    $("#voters").after("<input id='VoteSubmit' type='submit' value='Vote' />");

    var language = "@(bool.Parse(res.IsFrench) ? "FR" : "EN")";   // Sets var language as user languge
    $("input[type=checkbox]").click(function () {
        $(this).prop("checked", true);

    });
    $("input[type=checkbox]").change(function () {
        $("input[type=checkbox]").prop("checked", false);

        var a = $(this).val();
        $("input#Vote").val(a); // Inserts cows name into hidden field
    $("#Language").val(language);// Inserts language  into hidden field
    });



});
</script>

Answer 1

我认为问题可能是这个 -

if ($(this).prop("checked", true)) {
    $(this).addClass("selected");
}

看起来你想检查“checked”属性，如果是，则addClass。 $("input[type=checkbox]")将包装所有复选框，因此更改其中任何一个都将激活事件代码，但函数内的$（this）将引用包装集，这是所有复选框。 if语句将返回this，其评估结果为真，所以可能就是这样。尝试

if($(this).prop("checked")) {

Answer 2

我认为您的jQuery代码存在问题，因为以下内容将触发change事件，该事件会将所有复选框设置回未选中状态

$("input[type=checkbox]").click(function () {
    $(this).prop("checked", true);
});

你也错过了第二行的分号

<script>
$(document).ready(function () {
    $("input#Vote").val("");
    $("#voters").after("<input id='VoteSubmit' type='submit' value='Vote' />");

    var language = "@(bool.Parse(res.IsFrench) ? 'FR' : 'EN')";   // Sets var language as user languge
    $("input[type=checkbox]").click(function () {
        $(this).prop("checked", true);

    });

    $("input[type=checkbox]").change(function () {
        $("input[type=checkbox]").prop("checked", false);

        var a = $(this).val();
        $("input#Vote").val(a); // Inserts cows name into hidden field
        $("#Language").val(language);// Inserts language  into hidden field
    });
});
</script>

Jquery /表单提交/复选框

2 个答案: