无法在表单提交上获得 select 单选按钮

Question

我在提交表单时获取单选按钮值时遇到问题。我以为当提交表单时它会得到用户制作的最终 selection 但它似乎无法识别哪个是 selected.

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

<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 我将这些数据保存到数据库中，并且输入应该填充答案，所以当我重新加载页面时 <span> About both equaly<input name="question1" value="both" checked="" type="radio"> </span>。它不应该被检查，因为我没有 select 任何东西。

Answer 1

首先，从所有复选框中删除 checked 属性，除非您希望预先选中一个复选框，在这种情况下，将其添加到那个复选框中。

无需遍历单选按钮即可查看选中了哪个。只需使用 :checked 伪 class。改变这个：

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

无法在表单提交上获得 select 单选按钮

Can't get select radio button on form submit

html

javascript

forms

jquery

ejs