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

Display the value on click of check box in an array

本文关键字：复选框 显示 单击 数组      更新时间：2023-09-26

我有一个包含10个复选框的数组。Onclick of checkbox我想要得到那个特定复选框的值。我可以用我的代码实现。当我按顺序点击时，它工作得很好。当我在点击复选框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>
有谁能告诉我该怎么做吗?演示

它很乱，但很有效: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);
    });
});

你只需要像这样改变你的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;
    });
}

您需要稍微清理一下您的代码，像这样:

我假设取消检查会从数组中删除该值，而检查则会添加。

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

相关文章：