表单提交时无法选择单选按钮

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"应该等于空”。无论单击什么，总是这样。不喜欢那个请求可以帮助我解决它，我认为我不必使用更改方法。

Ps我将此数据保存到DB，并且输入中应包含答案，因此，当我重新加载页面时<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")};

 $("input[type=radio]").on("click", function(e){ console.log($("input[type='radio']:checked").val()); }); 

 <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>