0

我最近制作了一个下拉式表单，用户可以选择其中一个列出的项目并点击“添加到购物车”，将它们带到另一个页面。

是否可以将其更改为 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>

感谢您的时间！

4

2 回答 2

0

是的你可以。尝试这个：

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();
于 2012-10-23T20:57:25.097 回答
-1

尝试这个：

<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>
于 2012-10-23T21:31:28.993 回答