从数据库动态创建表单并使用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标记。我有另一个跨度，应显示所有span标签的值之和。

灰色是应存储所选单选按钮值的范围

Answer 1

使用jQuery：

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

})

这应该可以解决问题。只需更改选择器。

“我必须从id创建选择器。这是我的主要问题。我必须使用像for循环这样的名称或id添加id” @Thug你也可以给他们一些他们将要有的课程。

你看：如果你做了

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

它将控制您单击的日志按钮类项目，它适用于您拥有的每个按钮类

Answer 2

使用循环可能会产生问题，因为有时循环计数器值和DB ID可能不同。那么您需要做什么将DB 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 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。

＆＃13;

＆＃13;

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

＆＃13;

ul {
    list-style-type: none;
}

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;