從數據庫動態創建表單並使用jquery訪問元素

Question

我有從數據庫創建的表單。表格中包含有這樣的

<label> 
    <input type="radio" name="rizici_radio<?php echo $riz_id ?>" 
    value="<?php echo $rizik['riz_vrednost_da']; ?>" > 
    <?php echo $rizik['riz_vrednost_da']; ?> 
</label> 

名稱屬性包含rizici_radio，並從數據庫中創建id單選按鈕。每行都有一對值爲1或0的單選按鈕。 所以我的問題是操縱那對單選按鈕的變化值。例如，當我選擇值爲1的單選按鈕時，它應該填寫帶有更改單選按鈕值的span標籤。而且我還有另一個跨度，其中應顯示所有跨度標記的值總和。

灰色是跨度，其中選定的單選按鈕的值應該存儲

Answer 1

使用循環可能會產生問題，因爲有時循環計數器每一個按鈕類值和數據庫ID可能不同。所以，你需要做的設置數據庫ID設置像下面兩個單選按鈕，什麼我在哪裏rel-id值設置爲DB IDS

<label><input type="radio" class="promena" rel-id = '2' name="rizici_radio2" value="1" >1</label>

<label><input type="radio" class="promena" checked rel-id = '2' name="rizici_radio2" value="0">0</label>

，並使用下面的jQuery代碼

$(".promena").on("change",function(){ // bind a function to the change event 

     if($(this).is(":checked")){ // check if the radio is checked 
      var val = $(this).val(); // retrieve the value 
      var id = $(this).attr("rel-id"); 

      $("#bodovi"+id).val(val); //setting value to respective hidden field 
      $("#scores"+id).text(val); // showing selected radio button value in gray area 
     } 
    }); 

希望這可以幫助你。

Answer 2

與jQuery：

$(radiobutton selector here).click(function(){ 
$(this).next(".greyValueArea").val($(this).val()); 

}) 

這應該可以解決問題。只是改變選擇器。

「選擇器我必須從ID的創建，這是我的主要問題。我必須使用類似for循環ID添加到名稱或標識」 @Thug你也可以給他們，他們將有incommon一些類。

你看：如果你犯了一個

$('.button').on("click",function(){ 
console.log($this) 
}) 

將控制檯登錄你點擊按鈕類項目，並將其應用於你有

Answer 3

首先，我認爲如果您需要稍後更新服務器數據，那麼請求帶有ajax請求的表數據作爲來自服務器的json數據會更好。

無論如何，用於獲取點擊一行，您還可以使用下面的腳本：

$('.selectionForm').on('change', 'input[type="radio"]', 
    function(event) { 
     console.log('changed radio', $(this).attr('name'), $(this).val(), $(this).parent().find('span')); 
     $(this).parent().find('span').text($(this).val()); 
}); 

它上升的DOM的點擊單選按鈕的父母，然後用找你再次下降到該行的跨度。

它使用事件委託，因爲這是從ajax請求動態添加內容所需的。這對PHP添加的內容不是必需的。

請參閱下面的演示，並在jsfiddle。

Handlebars.registerHelper('isChecked', function(input, options) { 
 
    //console.log(input, this); 
 
    //console.log(this, this.value, input); 
 
    return this.value === input? 'checked': ''; 
 
}); 
 

 
var $out = $('#out'), 
 
    rowTmpl = $("#row-template").html(), 
 
    template = Handlebars.compile(rowTmpl); 
 

 
$.ajax({ 
 
    url: 'http://www.mocky.io/v2/556d9fd9e822500114253f39', 
 
    jsonp: 'callback', 
 
    dataType: "jsonp", 
 
    success: function(response) { 
 
     console.log(response); 
 
     $.each(response, function(index, data) { 
 
      //console.log(data); 
 
      $out.append(template(data)); 
 
     }); 
 
    } 
 
}); 
 

 
$('.selectionForm').on('change', 'input[type="radio"]', function(event) { 
 
    console.log('changed radio', $(this).attr('name'), $(this).val(), $(this).parent().find('span')); 
 
    $(this).parent().find('span').text($(this).val()); 
 
}); 
 
//$out.html(JSON.stringify(dataArray));

ul { 
 
    list-style-type: none; 
 
} 
 

 
li { 
 
    border-bottom: 1px solid gray; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.3/handlebars.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h1>form loaded with ajax request:</h1> 
 
<p>table generated with javascript</p> 
 
<form class="selectionForm"> 
 
    <ul id="out"></ul> 
 
    <!--<ul> 
 
     <li> 
 
      <input type="radio" name="row0" value="0"/>0 
 
      <input type="radio" checked="" name="row0" value="1"/>1 
 
      <span class="badge">1</span> 
 
     </li> 
 
     <li> 
 
      <input type="radio" name="row1" value="0"/>0 
 
      <input type="radio" checked="" name="row1" value="1"/>1 
 
      <span class="badge">1</span> 
 
     </li> 
 
    </ul>--> 
 
</form> 
 

 
<script id="row-template" type="text/x-handlebars-template"> 
 
    <li> 
 
     <input type="radio" value="0" name="row{{id}}" {{isChecked 0 }}/>0 
 
     <input type="radio" value="1" name="row{{id}}" {{isChecked 1 }}/>1 
 
     <span class="badge">{{value}}</span> 
 
    </li> 
 
</script> 
 
     
 
<h1>form generated with server side script</h1> 
 
<form class="selectionForm"> 
 
<ul> 
 
     <li> 
 
      <input type="radio" name="row0" value="0"/>0 
 
      <input type="radio" checked="" name="row0" value="1"/>1 
 
      <span class="badge">1</span> 
 
     </li> 
 
     <li> 
 
      <input type="radio" name="row1" value="0"/>0 
 
      <input type="radio" checked="" name="row1" value="1"/>1 
 
      <span class="badge">1</span> 
 
     </li> 
 
    </ul> 
 
    </form>