單選按鈕值轉換為另一個功能

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調用該函數

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

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