Question

我已经创建了UI作为我想输入数据的方式。

选择产品名称后，该产品的风味会动态附加复选框。

使用JS函数动态追加所有复选框数据。之后我尝试在按钮点击时将这些数据插入数据库。但是我在如何获取被检查的复选框列表的ID方面存在问题。

有人可以帮我解决这个问题吗？

我正在使用Codeigniter框架进行开发。

JS：

var ptype = $j("#cmb_freeproduct_type").val();        
    //alert(ptype);
    //$j('#eqtyrw').hide(500);
    $j.ajax({
    type: 'post',
    url: 'loadFlavorTypes',
    data: {ptype:ptype},
    success: function (data) {
        alert(data);
        var result = JSON.parse(data);
        //alert(result);
        var datas = [];

        for (var x = 0; x < result.length; x++) {


            datas.push('<tr id="'+result[x].product_flavour_id+'">'
                        +'<td>'
                        +'<input type="checkbox" name="fflavor_wise" id="fflavor_wise'+x+'" autocomplete="off" value=""></input>'
                        +'</td>'
                        +'<td id="fflavor'+x+'">      <b>'+result[x].product_flavour+'</b> </td>'

                    +'</tr>');

        }
        $j("#flavors_for_product_free").html(datas);
    },
            error: function(data){
        alert('error');
    }
       });

Answer 1

jQuery的：

// Find all checkboxes on the page that are currently checked.
var checked = $("input[type=checkbox]:checked");

普通JavaScript：

// Find all input elements.
var inputs = document.getElementsByTagName("input");
var checked = [];

// Cycle our input elements list and find the checkboxes 
// that are checked.
for ( var i = 0; i < inputs.length; i++ ) {
    if ( inputs[i].type == "checkbox" && inputs[i].checked ) {
        checked.push(inputs[i]);
    }
}

在任何一种情况下，您现在都将拥有一个包含已选中复选框的数组。获取这些内容的ID应该非常简单。

在比较这些技术时使用jQuery的有力论据。

Answer 2

最好给他们一个class（例如fflavor_wise_cb），然后您可以轻松获得已检查的那些：

var checkedCbs = $('.fflavor_wise_cb:checked');

或者由于它们共享相同的name，您可以使用：

var checkedCbs = $('input[type=checkbox][name="fflavor_wise"]:checked');

然后，您可以使用each：

进行迭代

checkedCbs.each(function() {
    console.log($(this).val());
});

在你的代码中，它们的值是空的，所以要更好地测试它们给它们一个值。

Answer 3

首先，请在ajax代码中输入dataType：“JSON”，然后使用jquery $（data）each（function（index））{}

我在您的代码中进行了上述更改，请检查。

$.ajax({
    type: 'post',
    url: 'loadFlavorTypes',
    data: {ptype:ptype},
    dataType:"JSON",
    success: function (data) {
        alert(data);
        var result = data;

        //use jquery each function to iterate over the data 
        $(result).each(function(x){

            $("#flavors_for_product_free").append('<tr id="'+result[x].product_flavour_id+'">'
                        +'<td>'
                        +'<input type="checkbox" name="fflavor_wise" id="fflavor_wise'+x+'" autocomplete="off" value=""></input>'
                        +'</td>'
                        +'<td id="fflavor'+x+'">      <b>'+result[x].product_flavour+'</b> </td>'
                    +'</tr>');
        });
    },
            error: function(data){
        alert('error with'+data);
    }
       });

如何获取动态附加复选框列表中的值

3 个答案: