如何檢查單擊提交按鈕時選擇了哪個動態創建的單選按鈕？

Question

我知道這個問題之前已經被問過很多次了，但是我一直無法找到適合我的具體情況的解決方案。

所以我有一個單選按鈕，我最初是靜態創建的。 HTML代碼如下

    <body>
        <div class = 'container'>
            <div class = 'row'>
                <div class = 'col-md-8 col-md-offset-2 well'>
                    <div class = 'col-md-4'>
                        <h1>Title Placeholder</h1>
                        <p>My vote goes to</p>

在下面的 div 中，我創建了第一個靜態單選按鈕

                        <div class = 'radio'>
                            <label>
                                <input type = 'radio' value = '1' name = 'options' class = 'radio-options'/>
                                <p id = 'radio1'>The value of 1</p>
                            </label>
                        </div>
                        <button type = 'submit' class = 'btn btn-primary submit-butt'>Submit</button>
                    </div>
                </div>
            </div>
        </div>   

    </body>

下面是我創建動態單選按鈕的 javascript 文件部分

function createOptions(length, options){
    $('#radio1').html(options[0]);
    for (var i = 1; i < length; i++){
        $('.radio').append('<br>');
        $('.radio').append('<label><input type = radio value = 1 name = options class = radio-options/><p>'+options[i]+'</p></label>');
    }
    $('.radio').append('<br>');
    $('.radio').append('<label><input type = radio value = 1 name = options class = radio-options/><p>Custom</p></label>')
}

現在，當我單擊提交按鈕並選中其中一個單選按鈕時，我希望能夠知道選中了哪個單選按鈕以及包含在其輸入標簽中的 p 值

$('.submit-butt').on('click', function(){
                   if($('.radio-options').is(':checked')){
                       console.log('I have my value');
                   } 
                });

我嘗試了上面的代碼，但它似乎只適用於第一個靜態創建的單選按鈕。 如何讓相同的功能適用於靜態和動態生成的所有單選按鈕？

Answer 1

只要您的表單只處理一組單選按鈕，您就可以這樣做，只需將 formId 更改為您用於包裝單選按鈕的表單的任何類/ID。

$('input[name=radioName]:checked', '#formId').val()

$('.submit-butt').on('click', function(){
   var selectedRadioValue = $('input[name=radioName]:checked','#formId').val()
   console.log(selectedRadioValue)
});

Answer 2

這就是你可以做到的。 參考工作演示。

 <html> <head></head> <title></title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <style> #dynamicradio{ margin-left: 100px; } #clickme{ margin-left: 100px; margin-top:10px; } </style> <body> <div id="dynamicradio"></div> <input type="button" value="submit" id="clickme"> </body> <script type="text/javascript"> // here we create the dynamic radio button. var create_dynamic_radio = $("<input type='radio' id='myradioo'> <label> My Radio Button</label>") $("#dynamicradio").append(create_dynamic_radio); // here we write the code for click function. $("#clickme").click(function(){ var isradiochecked = $("#myradioo").prop('checked');//check whether the dynamic radio button is checked or not. if(isradiochecked == true) { alert("dynamic radio button is checked"); } else { alert("dynamic radio button isn't checked"); } }); </script> </html>

如何檢查單擊提交按鈕時選擇了哪個動態創建的單選按鈕？

問題描述

2 個解決方案

解決方案1
1 2016-09-14 18:44:08

解決方案2
0 2016-09-14 18:51:02

如何檢查單擊提交按鈕時選擇了哪個動態創建的單選按鈕？

問題描述

2 個解決方案

解決方案1 1 2016-09-14 18:44:08

解決方案2 0 2016-09-14 18:51:02

解決方案1
1 2016-09-14 18:44:08

解決方案2
0 2016-09-14 18:51:02