我在提交表单时遇到单选按钮值时遇到问题。我认为,在提交表单时,它会得到用户所做的最终选择,但看起来它并不能识别哪一个被选中。
初始加载时:这是我的表单
<div id="question1">
<label> Do you shop mostly on-line or at physical stores? </label>
<div class="radioButtons">
<span>
Mostly on-line stores
<input name="question1" value="on-line" type="radio">
</span>
<span>
mostly physical stores
<input name="question1" value="physical" type="radio">
</span>
<span>
About both equaly
<input name="question1" value="both" type="radio">
</span>
</div>
</div>
在我的提交处理程序
中 $(".aboutmeQuestions").on("submit", function(e){
e.preventDefault();
var values = {};
var $inputs = $(".aboutmeQuestions :input").not(":submit");
$inputs.each(function(){
values[this.name] = {answer : $(this).val()};
});
//I thought the above would get the radio buttons but I think it got the last choice as the selected one no matter what was chosen. so I tried below because I thought that the checked attribute would change automatically.
$("input[type='radio']").each(function(){
console.log("this ",this);
if($(this).attr("checked")){
values[this.name] = {answer : $(this).val()};
}
})
在我的EJS中:
<div id="question1">
<label> <%=aboutUser.question1.question%> </label>
<div class = "radioButtons">
<span>Mostly on-line stores <input type="radio" name="<%=aboutUser.question1.name%>" value="on-line" <% if(aboutUser.question1.answer == "on-line"){%> checked <%}%>> </span>
<span>mostly physical stores <input type="radio" name="<%=aboutUser.question1.name%>" value="physical" <% if(aboutUser.question1.answer == "physical"){%> checked <%}%>> </span>
<span> About both equaly <input type="radio" name="<%=aboutUser.question1.name%>" value="both" <% if(aboutUser.question1.answer == "both"){%> checked <%}%> ></span>
</div>
</div>
我测试了它。点击任何内容并按下提交按钮后,我得到的values
对象question5[answer]: maybe"
question1[answer]: "both"
应该等于零。无论我点击什么,总是那样。我不喜欢那些请求帮助我修复它。我没想到我必须使用改变方法。
我将此数据保存到数据库,输入应填充答案,以便重新加载页面<span>
About both equaly<input name="question1" value="both" checked="" type="radio">
</span>
。它不应该被检查,因为我没有选择任何东西。
答案 0 :(得分:0)
首先,从所有复选框中删除checked
属性,除非您想要预先选择一个,并且在这种情况下将其添加到该一个。
无需循环显示单选按钮以查看已检查的内容。只需使用:checked
伪类。改变这个:
$("input[type='radio']").each(function(){
console.log("this ",this);
if($(this).attr("checked")){
values[this.name] = {answer : $(this).val()};
}
})
到此:
var checkedRad = $("input[type='radio']:checked");
values[this.name] = {answer : checkRad.value};
或者,如果您在获取其值后不需要对已检查的单选按钮的引用::
values[this.name] = {answer : $("input[type='radio']:checked")};
$("input[type=radio]").on("click", function(e){
console.log($("input[type='radio']:checked").val());
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="question1">
<label> Do you shop mostly on-line or at physical stores? </label>
<div class="radioButtons">
<span>
Mostly on-line stores
<input name="question1" value="on-line" type="radio">
</span>
<span>
mostly physical stores
<input name="question1" value="physical" type="radio">
</span>
<span>
About both equaly
<input name="question1" value="both" type="radio">
</span>
</div>
</div>
&#13;