Question

我试图找到＆＃34; CheckBox＆＃34;的价值。单击按钮时动态创建的表中的（0,1,2）。 checkBox位于表的每一行的最后一个单元格中。 jQuery没有给我＆＃34;值＆＃34;单击复选框时。这是我的代码：

<body>

<table id="DataTable" 
style="position:absolute;left:348px;top:80px;width:350px;height:10px;z-
index:7;text-align:center;"></table>

<input type="submit" id="Button4" name="Clk_In" value="Create Table" 
style="position:absolute;left:495px;top:250px;width:96px;height:35px;z-
index:0;">


<script 
 src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js">
</script>
<script>  // jQuery code below 

var count = 0;

// create table heading & rows by clicking button
$(document).on("click","#Button4", function() {               

    drawHeading();

    for( var i = 0; i < 3; i++ ) {
       drawRow();
    }
});

function drawHeading() {

var row = $("<tr />")
$("#DataTable").append(row);
row.append($("<th>" + "Trans#" + "</th>"));
row.append($("<th>" + "DayOfYear" + "</th>"));
row.append($("<th>" + "Vendor" + "</th>"));
row.append($("<th>" + "Amount&nbsp;($)" + "</th>"));
row.append($("<th>" + "Remove" + "</th>"));

}

function drawRow( ) {

var row = $("<tr />")
    $("#DataTable").append(row);
    row.append($("<td>" + "cell1" + "</td>"));
    row.append($("<td>" + 2  + "</td>"));
    row.append($("<td>" + "cell3" + "</td>"));
    row.append($("<td>" + 4 + "</td>"));
    row.append($("<td/>").append($('<input type="checkbox" name="chkbox2" 
     value="' + count + '"/>')));

    count += 1;
    //alert("count: " + count);
 }

// find checkBox value   *** NOT WORKING should show 0 or 1 or 2  *** 
var checkboxValues = [];

$('input[name=chkbox2]:checked').map(function() {
    checkboxValues.push($(this).val());
});

alert(checkboxValues[0]);

</script>

任何专家建议将不胜感激。格雷格

Answer 1

即使在创建HTML之前，您也在检查复选框值。您可以将代码移动到单击按钮的事件处理程序。

<script>  
// jQuery code below 

    var count = 0;

    // create table heading & rows by clicking button
    $(document).on("click","#Button4", function() {               

        drawHeading();

        for( var i = 0; i < 3; i++ ) {
           drawRow();
        }

         // find checkBox value
    var checkboxValues = [];

    $('input[name=chkbox2]:checked').map(function() {
        checkboxValues.push($(this).val());
    });

    alert(checkboxValues[0]);

    });

    function drawHeading() {

    var row = $("<tr />")
    $("#DataTable").append(row);
    row.append($("<th>" + "Trans#" + "</th>"));
    row.append($("<th>" + "DayOfYear" + "</th>"));
    row.append($("<th>" + "Vendor" + "</th>"));
    row.append($("<th>" + "Amount&nbsp;($)" + "</th>"));
    row.append($("<th>" + "Remove" + "</th>"));

    }

    function drawRow( ) {

    var row = $("<tr />")
        $("#DataTable").append(row);
        row.append($("<td>" + "cell1" + "</td>"));
        row.append($("<td>" + 2  + "</td>"));
        row.append($("<td>" + "cell3" + "</td>"));
        row.append($("<td>" + 4 + "</td>"));
        row.append($("<td/>").append($('<input type="checkbox" name="chkbox2" 
         value="' + count + '"/>')));

        count += 1;
        //alert("count: " + count);
     }

    </script>

如果您想在选中复选框时获取值，您可以收听复选框更改事件。

$('input[name=chkbox2]').change(function() {
        //perform your logic
    });

Answer 2

不追加后。使用＆＃34; map＆＃34;当对象追加时起作用。

row.append($("<td/>").append($.map(this.items, function (item, index) { checkboxValues.push($(this).val()); })));

jQuery在动态创建的表/单元格中找不到checkBox值

2 个答案: