將下拉菜單更改爲無線電類型表單？

Question

我最近做了一個下拉式表單，用戶可以在其中選擇一個列出的項目，然後點擊「添加到購物車」，將它們帶到另一個頁面。

是否有可能將其更改爲Radio類型的表單，他們可以選擇他們想要的內容並點擊「添加到購物車」而不是下拉類型？我瀏覽了Google上幾乎所有的頁面，所有的Radio Type幫助部分基本上只是將信息寫入文件中。我不需要任何東西，在一個文件中寫道，基本上只是重定向到另一個頁面，當用戶選擇的選擇，然後點擊「添加到購物車：

我現在的下拉菜單的形式是：

<form> 
    <p align="center"><b>Select a Payment:</b> 
     <select id="setit" style="color: #000" size="1" name="test" onchange="displayValue();"> 
     <option value="/">Select one</option>  
     <option value="/">1 Month: $4.99</option>  
     <option value="/">3 Months: $14.99</option>  
     <option value="/">6 Months: $29.99</option> 
     </select> 
     <br /> 
     <div id="displayValue"></div> 
     <br /> 
     <center><input type="button" value="Add to Cart" onclick="window.open(setit.options[setit.selectedIndex].value)"></center> 
    </p> 
</form> 

感謝您的時間

Answer 1

是的，你可以試試這個：。

HTML

<form> 
    <p align="center"> 
     <b>Select a Payment:</b> 
     <input type="radio" id="setit1" name="setit" value="1" /><label for="setit1">1 Month: $4.99</label> 
     <input type="radio" id="setit2" name="setit" value="3" /><label for="setit2">3 Months: $14.99</label> 
     <input type="radio" id="setit3" name="setit" value="6" /><label for="setit3">6 Months: $29.99</label> 
     <br /> 
     <div id="displayValue"></div> 
     <br /> 
     <center><input type="button" id="button-add-to-cart" value="Add to Cart"></center> 
    </p> 
</form> 

JS

var app = { 

    payments: { 

     option1: "1 Month: $4.99", 
     option3: "3 Months: $14.99", 
     option6: "6 Months: $29.99" 

    }, 

    init: function() { 

     var button = document.getElementById('button-add-to-cart'), 
      radios = document.forms[0].setit, 
      i = 0; 

     // This handles the button click 
     button.onclick = function (e) { 

      var selected = app.getCheckedRadio(document.forms[0].setit); 

      if (selected) { 
       window.open('//someurl.com?val=' + selected.value); // Open window 
       return false; 
      } 

      alert("No payment selected."); // Else notify user 
     };  

     // This handles the selection change 
     for (; i < radios.length; i++) { 
      radios[ i ].onclick = app.radioChange; 
     } 

    }, 

    getCheckedRadio: function (radio_group) { 

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

      var button = radio_group[ i ]; 

      if (button.checked) { 
       return button; 
      } 
     } 

     return undefined; 
    }, 

    radioChange: function (e) { 

     var display = document.getElementById('displayValue'), 
      radio = app.getCheckedRadio(document.forms[0].setit), 
      value = radio.value; 

     display.innerHTML = app.payments[ "option" + value ]; 
    } 

}; 

window.load = app.init(); 

Answer 2

試試這個：

<form name="form1"> 
    <p align="center"> 
    <b>Select a Payment:</b> 
    <input type="radio" name="setit" value="1" /><label for="setit1">1 Month: $4.99</label> 
    <input type="radio" name="setit" value="2" /><label for="setit2">3 Months: $14.99</label> 
    <input type="radio" name="setit" value="3" /><label for="setit3">6 Months: $29.99</label> 
    <br /> 
    <div id="displayValue"></div> 
    <br /> 
    <center><input type="button" value="Add to Cart" onclick="window.open(GetRadioValue())"></center> 
    </p> 
</form> 

你需要一個js函數獲取檢查收音機的價值：

<script type="text/javascript"> 
    function GetRadioValue() { 
     len = document.form1.setit.length; 
     for (i = 0; i <len; i++) { 
      if (document.form1.setit[i].checked) { 
       return document.form1.setit[i].value; 
      } 
     } 
    } 
</script>