單擊數組中復選框時顯示的值

Question

我有10個復選框的數組。 復選框的onclick我想獲取該特定復選框的值。 我能夠使用我的代碼實現。當我按順序單擊時，它工作正常。 當我在單擊復選框7后單擊復選框5時，復選框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>  

誰能告訴我該怎么做？

演示

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