使用Javascript或Jquery將單選按鈕添加到HTML表單

Question

在我的HTML代碼中，

<form id="approve">
    <input name="myDate" id="monthYearPicker" />
    <button type="button"onclick="monthlytimesheets()">Submit</button>
</form>

在我的Javascript文件中，我具有以下內容：

function monthlytimesheets() {
    $.post('http://localhost:8000/timer/monthly_timesheet/',
        function(returnedData) {
            for(i=0;i<returnedData.length;i++) {
                for(j=i+1;j<returnedData.length;j++) {
                    if(returnedData[i]['id']==returnedData[j]['id']) {
                        returnedData.splice(j,1)
                    }
                }
            }
        });

現在，我希望將我returnedData[i]['full_name']在HTML頁面上呈現為單選按鈕。 我怎樣才能做到這一點。 如何從JS動態創建單選按鈕？ 我還可以為這些單選按鈕分配值嗎？

Answer 1

您可以根據需要使用jquery輕松創建單選按鈕。 我編寫了一個代碼來演示如何dynamically創建radio按鈕。 自動並單擊按鈕時。根據需要更改內部條件。 嘗試下面的代碼。

 <html> <head></head> <title></title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <body> <!-- Example one , add radio button using jquery automatically--> <h1>Example one , add radio button using jquery automatically</h1> <form id="approve"> <input name="myDate" id="monthYearPicker" /> <div class="lastone"></div> </form> <br><br><hr> <!-- Example two, add radio button using jquery when button click--> <h1>Example two, add radio button using jquery when button click-</h1> <form id="approveone"> <input name="myDate" id="monthYearPicker" /> <div class="lasttwo"></div> <input type="button" id="addradio" value="submit"> </form> </body> <script type="text/javascript"> $(document).ready(function(){ for(var i=0;i<5;i++) { var labelname = "radio button"+i; var value = i; var create = $('<input type="radio" value="'+value+'"><label>'+labelname+'</label><br>'); $(".lastone").append(create); } }); $(document).ready(function(){ $("#addradio").click(function(){ for(var i=0;i<9;i++) { var labelname = "radio button"+i; var value = i; var create = $('<input type="radio" value="'+value+'"><label>'+labelname+'</label><br>'); $(".lasttwo").append(create); } }); }); </script> </html>

Answer 2

您可以像這樣動態創建元素

var content = document.createElement('div');    
var newElement = document.createElement('input');
newElement.setAttribute('type', 'radio');

newElement.value = "Your value";   ///Here you can assigned value to the radio button

content.appendChild(newElement);

Answer 3

創建一個返回單選元素的函數。 已經問過類似的問題。

可以在這里找到：如何在Javascript中動態創建在所有瀏覽器中都可以使用的單選按鈕？

function createRadioElement(name, checked) {
  var radioHtml = '<input type="radio" name="' + name + '"';
  if ( checked ) {
      radioHtml += ' checked="checked"';
  }
  radioHtml += '/>';

  var radioFragment = document.createElement('div');
  radioFragment.innerHTML = radioHtml;

  return radioFragment.firstChild;
}

請注意，這是Prestaul發布的已發布鏈接的答案的摘錄。

可以將其發布為評論，但需要50rep才能評論...

Answer 4

 function monthlytimesheets() { var name = $('#monthYearPicker').val(); $('#approve').append('<input type="radio" />'+name); }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <form id="approve"> <input name="myDate" id="monthYearPicker" /> <button type="button"onclick="monthlytimesheets()">Submit</button> </form>

使用Javascript或Jquery將單選按鈕添加到HTML表單

問題描述

4 個解決方案

解決方案1
1 2016-08-22 16:25:19

解決方案2
0 2016-08-22 07:42:52

解決方案3
0 2016-08-22 07:43:51

解決方案4
0 2016-08-22 07:59:10

使用Javascript或Jquery將單選按鈕添加到HTML表單

問題描述

4 個解決方案

解決方案1 1 2016-08-22 16:25:19

解決方案2 0 2016-08-22 07:42:52

解決方案3 0 2016-08-22 07:43:51

解決方案4 0 2016-08-22 07:59:10

解決方案1
1 2016-08-22 16:25:19

解決方案2
0 2016-08-22 07:42:52

解決方案3
0 2016-08-22 07:43:51

解決方案4
0 2016-08-22 07:59:10