我有一个动态创建的基本表单。我提交表单时遇到问题,一瞬间,所有复选框都被选中....有谁知道为什么会发生这种情况?这是正常的吗?表单提交正常,但是当用户点击投票并突然看到所有复选框都被选中时,它会变得混乱。 (注意这里可能只有一点点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>
答案 0 :(得分:1)
我认为问题可能是这个 -
if ($(this).prop("checked", true)) {
$(this).addClass("selected");
}
看起来你想检查“checked”属性,如果是,则addClass。 $("input[type=checkbox]")
将包装所有复选框,因此更改其中任何一个都将激活事件代码,但函数内的$(this)将引用包装集,这是所有复选框。 if语句将返回this
,其评估结果为真,所以可能就是这样。尝试
if($(this).prop("checked")) {
答案 1 :(得分:0)
我认为您的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>