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

我知道這個問題已被問過很多次，但我一直沒能找到適合我的具體情況的解決方案。如何檢查點擊提交按鈕時選擇了哪個動態創建的單選按鈕？

所以我有一個單選按鈕，我最初創建靜態。下面

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

的HTML代碼中給出了下面的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'); 
        } 
       });

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

來源

2016-09-14 random_coder_101

只要您的表單只處理一組單選按鈕，您可以這樣做，只需將formId更改爲包裝無線電的表單所使用的任何類/標識。

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

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

來源

2016-09-14 18:44:08 finalfreq

這是你可以怎麼做。參考工作演示。

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

來源

2016-09-14 18:51:02

「試試這個」是任何人都沒有幫助。什麼改變了？它爲什麼有效？ –

好吧，先生@SterlingArcher，改變了它。 –

@AuradhS是否需要通過變量創建動態單選按鈕？另外，是否需要創建新的動態單選按鈕作爲單獨的div標籤的一部分？ –

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

回答

相關問題