Question

我有一个包含10个复选框的数组。 onclick of checkbox我想获得该特定复选框的值。我能够使用我的代码实现。当我按顺序点击时它工作正常。单击复选框7后单击复选框5时，复选框5即...的值将被添加到7中。我不希望按此顺序。我想要以我点击的任何顺序显示值。我的js文件如下

var selected = new Array();
$(document).ready(function(){

checkBoxTest();

}); 
function checkBoxTest() {
    alert("checkbox test");
    for(i = 0; i < 10; i++){
        $("#catalog_table").append('<tr><td>Checkbox<input type="checkbox"  name ="chkbox"  value="' +i+' "/><td></tr>');
        test();
    } 

}

function test() {
    $('#catalog_table input:checkbox').change(function() {
    var emails = [];
    $('#catalog_table input:checkbox:checked').each(function() {
     emails.push($(this).val());
    });
    var textField = document.getElementById("root");
      textField.value = emails;
    });

}

我的HTML代码是这样的

<table id="catalog_table"> </table>
<textarea  id="root"></textarea>

任何人都可以告诉我该怎么做？

Demo

Answer 1

它凌乱，但它有效： http://jsfiddle.net/za7m8/1/

var selected = new Array();
$(document).ready(function(){

    $("input[type='checkbox']").on('change', function() {
        // check if we are adding, or removing a selected item
        if ($(this).is(":checked")) {
            selected.push($(this).val());
        } else {
            for(var i = 0; i<selected.length;i++) {
                if (selected[i] == $(this).val()) {
                    // remove the item from the array
                    selected.splice(i, 1);
                }
            }
        }

        // output selected
        var output = "";
        for (var o = 0; o<selected.length; o++) {
            if (output.length) {
                output += ", " + selected[o];
            } else {
                output += selected[o];
            }
        }
        $("#root").val(output);
    });
});

Answer 2

您需要稍微清理一下代码，如下所示：

我假设取消选中会从数组中删除值，并检查添加。

var selected = new Array(); // What for is this here ?

$(document).ready(function () {    
    checkBoxTest();    
});

function checkBoxTest() {

    for (i = 0; i < 10; i++) {
        $("#catalog_table").append('<tr><td>Checkbox<input type="checkbox"  name ="chkbox"  value="' + i + ' "/><td></tr>');
    }
    test();
}

function test() {
    var emails = [],
        textField = document.getElementById("root");

    $('#catalog_table input:checkbox').change(function () {
        var val = $(this).val();

        // if you don't want removal of values on `uncheck`, comment out everything below excluding `emails.push(val)` and the last line

        if(this.checked){    // if checked
            emails.push(val); // add it
        }else{  
            emails.splice(emails.indexOf(val), 1); // remove it if not checked
        }

        textField.value = emails; // set the value
    });
}

DEMO

Answer 3

您只需要像这样更改您的JavaScript。

var selected = new Array();
$(document).ready(function(){

checkBoxTest();

}); 
function checkBoxTest() {
    alert("checkbox test");
    for(i = 0; i < 10; i++){
        $("#catalog_table").append('<tr><td>Checkbox<input type="checkbox"  name ="chkbox"  value="' +i+' "/><td></tr>');
        test();
    } 
}

var emails = [];
function test() {
    $('#catalog_table input:checkbox').change(function() {
    if (this.checked)
    {
        if ( emails.indexOf( $(this).val() ) === -1 )
        {
            emails.push($(this).val());
        }            
    } else
    {
        if ( emails.indexOf( $(this).val() ) !== -1 )
        {
            var index = emails.indexOf( $(this).val() );
            emails.splice(index, 1);
        }
    }

    var textField = document.getElementById("root");
    textField.value = emails;
    });
}

在数组中单击复选框时显示值

3 个答案:

DEMO