Question

这是一个函数，用于将用户从html文件中选择的单选按钮的值输入到我的javascript文件中：

  function getRadioCheckedValue(radio_name)
  {
     var oRadio = document.forms[0].elements[radio_name];
     for(var i = 0; i < oRadio.length; i++)
     {
        if(oRadio[i].checked)
       {
           return oRadio[i].value;
        }
     }
     return '';
  }

我正在使用一个html文件，但有两个＆＃34;页面＆＃34;通过显示和隐藏div来收音机拨号。两个收音机拨号有不同的名称。当我做第一个，它工作正常并正确检索值，但当我做第二个，页面源强调行

    for(var i = 0; i < oRadio.length; i++)

并说，＆＃34; Uncaught TypeError：无法读取属性＆＃39;长度＆＃39;未定义＆＃34;

我肯定试图用正确的名字来称呼它。

当我更改第二个收音机的名称以匹配html和javascript文件中的第一个收音机的名称时，结果是拉出的值是第一次拉出的值（来自第一个＆＃34的那个） ;页面＆＃34;。）

如何使此功能与第二组无线电配合使用？

编辑：HTML：

<!DOCTYPE html>
<html>
  <head>
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link href="css/styles.css" rel="stylesheet" type="text/css">
    <script src="js/jquery-1.11.3.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script src="js/scripts.js"></script>
    <title>Pizza Parlor</title>
  </head>
  <body>
    <div class="container">
      <h1>Pizza Parlor</h1>

<!---Beginning of step 1-->
    <span class="step-1">
      <!--step 1 progress bar begin-->
      <div class="progress">
        <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 4em;">
        Step 1/4
        </div>
      </div>
      <!--step 1 progress bar end-->
      <h1>Step 1: Pick your Size</h1>
      <!--step 1 options begin-->
      <form id="size">
        <div class="radio">
          <label>
            <input type="radio" name="optionsRadios" id="optionsRadios1" value="Small ($10.00)">
            Small (10"): $10.00
          </label>
        </div>
        <div class="radio">
          <label>
            <input type="radio" name="optionsRadios" id="optionsRadios2" value="Medium ($12.00)">
            Medium (12"): $12.00
          </label>
        </div>
        <div class="radio">
          <label>
            <input type="radio" name="optionsRadios" id="optionsRadios3" value="large ($14.00)">
            Large (14"): $14.00
          </label>
        </div>
          <!--step 1 options end-->
        <br>
        <br>
        <button class="btn btn-primary"type="submit" class="btn">Next</button>
      </form>
  </span>
  <!--end of step 1-->

<!--step 2 begin-->
  <span class= "step-2">
    <!--step 2 progress bar begin-->
    <div class="progress">
      <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 20%;">
          Step 2 of 4
      </div>
    </div>
    <!--step 2 progress bar end-->
    <h1>Step 2: Pick your Sauce</h1>
    <!--step 2 options begin-->
    <form id="sauce">
      <div class="radio">
        <label>
          <input type="radio" name="saucesRadios" id="sauceChoice1" value="Marinara">
          Marinara
        </label>
      </div>
      <div class="radio">
        <label>
          <input type="radio" name="sauceRadios" id="sauceChoice2" value="Alfredo">
          Alfredo
        </label>
      </div>
      <div class="radio">
        <label>
          <input type="radio" name="sauceRadios" id="sauceChoice3" value="Pesto">
          Pesto (add $2.00)
        </label>
      </div>
      <!--step 2 options end-->
      <br>
      <br>
      <button class="btn btn-primary"type="submit" class="btn">Next</button>
    </form>
  </span>
<!--step 2 end -->

<!--step 3 span class begin0-->
  <span class= "step-3">
    <!--step 3 progress bar begin-->
    <div class="progress">
      <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 50%;">
    Step 3 of 4
      </div>
    </div>
    <!--step 3 progress bar end-->
    <form id="toppings">
      <div class="checkbox-inline">
        <h4>Meat</h4>
        <label class="checkbox-inline">
          <input type="checkbox" name="optionsToppings" id="optionToppings1" value="pepperoni (+ $2.00)">
          Pepperoni (+ $2.00)
        </label>
        <label class="checkbox-inline">
          <input type="checkbox" name="optionsToppings" id="optionToppings2" value="sausage (+ $2.00)">
          Sausage (+ $2.00)
        </label>
        <label class="checkbox-inline">
          <input type="checkbox" name="optionsToppings" id="optionToppings3" value="chicken (+ $3.00)">
          Chicken (+ $3.00)
        </label>
        <br>
        <h4>Veggies</h4>
        <label class="checkbox-inline">
          <input type="checkbox" name="optionsToppings" id="optionsToppings5" value="onions (+ $0.25)">
          Onions (+ $0.25)
        </label>
        <label class="checkbox-inline">
          <input type="checkbox" name="optionsToppings" id="optionsToppings6" value="green peppers (+ $0.25)">
          Green Peppers (+ $0.25)
        </label>
        <label class="checkbox-inline">
          <input type="checkbox" name="optionsToppings" id="optionsToppings7" value="Jalapeños (+ $0.25)">
          Jalapenos (+ $0.25)
        </label>
        <label class="checkbox-inline">
          <input type="checkbox" name="optionsToppings" id="optionsToppings8" value="mushrooms (+ $0.25)">
          Mushrooms (+ $0.25)
        </label>
        <label class="checkbox-inline">
          <input type="checkbox" name="optionsToppings" id="optionsToppings9" value="pineapple (+ $0.50)">
         Pineapple (+ $0.50)
        </label>
        <label class="checkbox-inline">
          <input type="checkbox" name="optionsToppings" id="optionsToppings10" value="black olives (+ $0.50)">
          Black Olives (+ $0.50)
        </label>
        <label class="checkbox-inline">
          <input type="checkbox" name="optionsToppings" id="optionsToppings11" value="green olives (+ $0.75)">
          Green Olives (+ $0.75)
        </label>
        <br>
        <h4>Cheese it up!</h4>
        <label class="checkbox-inline">
          <input type="checkbox" name="optionsToppings" id="optionsToppings4" value="extra cheese (+ $1.00)">
          Exta Cheese (+ $1.00)
        </label>
      </div>
      <!--step 3 options end-->
      <br>
      <br>
      <button class="btn btn-primary"type="submit" class="btn">Next</button>
    </form>
  </span>
<!--step 3 span end -->

<span class= "step-4">
  <!--step 4 progress bar begin-->
  <div class="progress">
    <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 75%;">
  Last step!
    </div>
  </div>
  <!--step 4 progress bar end-->
  <form id="how-many">
    <div class="form-group">
      <label for="number-pizzas">Number of this pizza that you want: </label>
      <input type="text" class="form-control" id="number-pizzas">
    </div>
    <br>
    <br>
    <button class="btn btn-primary"type="submit" class="btn">Next</button>
  </form>
  <!--end of form-->
</span>
<!-- step 4 span end-->

<span class= "step-5">
  <em><p> Size: </p></em>
  <ul class="list unstyled" id="crust">
  </ul>
  <em><p> Sauce: </p></em>
  <span class=sauce></span>
  <em><p> Toppings: </p></em>
  <ul class="list unstyled" id="toppings">
  </ul>
  <hr width=25%  align=left>
  <p>Total price of this pizza: $<span class="price"></span></p>
  <p> Number of pies: <span class="num-pizzas"></span></p>
  <p> Total price for this order:</p> <h4>$<span class="total-price"></span></h4>
  <form id="place-order">
    <button class="btn btn-primary"type="submit" class="btn">Submit Order</button>
  </form>
</span>
<!--Step 5 span end-->

<span class="step-6">
  <div class="progress">
    <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%;">
  CONGRATULATIONS! Your order is being prepared! Pick it up in about 30 minutes!
    </div>
  </div>
</span>
  </body>
</html>

我如何在javascript中调用它：

  $(".step-1").show();
  $("form#size").submit(function(event) {
    var pizzaSize = getRadioCheckedValue("optionsRadios");
    $(".my-size").text(pizzaSize);
    $(".step-1").hide();
    $(".step-2").show();
    event.preventDefault();
  });

  $("form#sauce").submit(function(event) {
    var sauce = getRadioCheckedValue("sauceRadios");
    $(".step-2").hide();
    $(".step-3").show();
    event.preventDefault();
  });

Answer 1

您可以使用jQuery执行此操作：

var pizzaSize = $(":radio[name=optionsRadios]:checked").val();

你的代码失败的原因是因为你的页面上有多个表单：一个用于大小的表单，另一个用于表单的表单等。document.forms[0]只查看第一个表单，所以如果你试图从其中一个找不到它的表格中获取一个单选按钮。

Answer 2

使用Javascript：

  function getRadioCheckedValue(radio_name) {
      var group = document.getElementsByName(radio_name);

      for (var i = 0; i < group.length; i++) {
          if (group[i].checked == true) {
              return group[i].value;
          }
      }
  }

http://jsfiddle.net/SeanWessell/yvdxh8js/

然而，因为你在OP中使用了jQuery

jQuery的：

  function getRadioCheckedValue(radio_name) {
    return $(':radio[name=' + radio_name + ']:checked').val()
  }

http://jsfiddle.net/SeanWessell/yvdxh8js/2/

Answer 3

您收到该错误的原因是您命名一个的那些单选按钮＆＃34; saucesRadios＆＃34;，但其他两个被称为＆＃34; sauceRadios＆＃ 34 ;.因为只有一个单选按钮具有您使用的名称，所以您将获得单个节点而不是节点列表。

编辑 nope，Barmar是对的，你总是只看着页面上的第一个表单。

为什么这个函数会导致错误？

3 个答案: