Question

我在提交表单时遇到单选按钮值时遇到问题。我认为，在提交表单时，它会得到用户所做的最终选择，但看起来它并不能识别哪一个被选中。

初始加载时：这是我的表单

<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>。它不应该被检查，因为我没有选择任何东西。

Answer 1

首先，从所有复选框中删除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")};

＆＃13;

$("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;

无法在表单提交

1 个答案: