Question

我坚持使用这段代码：我无法获得在另一个函数中使用已检查单选按钮的值。

<script>
  function obtenerCD(browser) {
    document.getElementById('resultadoCD').innerHTML = browser;
    return browser;
  }

  function myFunction() {
      var a = "http://www.example.com/";
      var b = document.getElementById('variablea').value;
      var c = "/?Ancho=";
      var d = document.getElementById('variableb').value;
      var e = "%20M&Ancho%20Fraccion=";
      var f = document.getElementById('variablec').value;
      var g = "%20Cm";
      var h = "&Color%20Y%20Di%C3%A1metro=";
      var i = "Natural%2020-40%20Mm"; // variable inicial por defecto
      link = a + b + c + d + e + f + g + h + i;

      /* inicio test area */
      document.getElementById("demo").innerHTML = link;
      document.getElementById("boton").href = link;
    }
    /* fin test area */
</script>
<form>

  <p>
    (1) Elige la Altura:
    <select id="variablea" style="width:85px;" onchange="myFunction()">
      <option value="5-00-m">5.00 m</option>
      <option value="4-90-m">4.90 m</option>
      <option value="4-80-m">4.80 m</option>
      <option value="4-70-m">4.70 m</option>
      <option selected="selected" value="2-00-m" style "color:blue;">2.00 m *</option>
      <option value="1-90-m">1.90 m</option>
      <option value="1-80-m">1.80 m *</option>
    </select>
  </p>

  <p>
    (2) Elige el Ancho:
    <select id="variableb" style="width:90px;" onchange="myFunction()">
      <option value="1" selected="selected">1 metro</option>
      <option value="2">2 metros</option>
      <option value="3">3 metros</option>
      <option value="4">4 metros</option>
      <option value="5">5 metros</option>
      <option value="6">6 metros</option>
      <option value="7">7 metros</option>
      <option value="8">8 metros</option>
      <option value="9">9 metros</option>
      <option value="10">10 metros</option>
    </select>
    <select id="variablec" style="width:70px;" onchange="myFunction()">
      <option value="0" selected="selected">0 cm</option>
      <option value="10">10 cm</option>
      <option value="20">20 cm</option>
      <option value="30">30 cm</option>
      <option value="40">40 cm</option>
      <option value="50">50 cm</option>
      <option value="60">60 cm</option>
      <option value="70">70 cm</option>
      <option value="80">80 cm</option>
      <option value="90">90 cm</option>
    </select>
  </p>

  <p>
    (3) Elige el Color y el Di&aacute;metro:

    <div class="cd-selector">
      <input checked="checked" id="natural24" type="radio" name="browser" value="Natural%2020-40%20Mm" onclick="obtenerCD(this.value)">
      <label class="drinkcard-cc natural24" for="natural24">natural24</label>
      <input id="natural35" type="radio" name="browser" value="Natural%2030-50%20Mm" onclick="obtenerCD(this.value)">
      <label class="drinkcard-cc natural35" for="natural35">natural35</label>
      <input id="dorado24" type="radio" name="browser" value="Dorado%2020-40%20Mm" onclick="obtenerCD(this.value)">
      <label class="drinkcard-cc dorado24" for="dorado24">dorado24</label>
      <input id="dorado35" type="radio" name="browser" value="Dorado%2030-50%20Mm" onclick="obtenerCD(this.value)">
      <label class="drinkcard-cc dorado35" for="dorado35">dorado35</label>
    </div>
  </p>
  <p><a href="http://www.example.com" id="boton" />Aceptar</a>
  </p>
</form>
<p>--- Inicio test area ---</p>
<p>Link compuesto: <span id="demo"></span>
</p>
<p>Variable Color y Diametro: <span id="resultadoCD"></span>
</p>
<p>--- Fin test area ---</p>

Answer 1

获取已检查单选按钮的值的最简单方法是使用querySelector方法，该方法将CSS样式选择器作为其参数。

document.querySelector('input[name="browser"]:checked').value;

Answer 2

您已在阅读该功能中的值。问题是当页面加载时，即使选中了复选框，您也没有看到任何值。

原因是，复选框已经有checked属性，但该功能仅在onclick上调用

＆＃13;

function obtenerCD(browser) {
  console.log(browser);
  document.getElementById('resultadoCD').innerHTML = browser;
}

document.getElementById('resultadoCD').innerHTML = document.querySelector('input[name="browser"]:checked').value;;

＆＃13;

<input checked="checked" id="natural24" type="radio" name="browser" value="Natural%2020-40%20Mm" onclick="obtenerCD(this.value)">
<label class="drinkcard-cc natural24" for="natural24">natural24</label>
<input id="natural35" type="radio" name="browser" value="Natural%2030-50%20Mm" onclick="obtenerCD(this.value)">
<label class="drinkcard-cc natural35" for="natural35">natural35</label>
<input id="dorado24" type="radio" name="browser" value="Dorado%2020-40%20Mm" onclick="obtenerCD(this.value)">
<label class="drinkcard-cc dorado24" for="dorado24">dorado24</label>
<input id="dorado35" type="radio" name="browser" value="Dorado%2030-50%20Mm" onclick="obtenerCD(this.value)">
<label class="drinkcard-cc dorado35" for="dorado35">dorado35</label>

<p>Variable Color y Diametro: <span id="resultadoCD"></span>
</p>

＆＃13;

单选按钮值转换为另一个功能

2 个答案: