jquery复选框获取选中的值，并将每个值显示给特定的容器。

Question

我希望获得复选框值并将每个值显示到特定的容器中。非常感谢!

<input type="checkbox" id="checkbox-1" class="choices-yn-1" value="1">
<input type="checkbox" id="checkbox-2" class="choices-yn-2" value="2">
<input type="checkbox" id="checkbox-3" class="choices-yn-3" value="3">
<input type="checkbox" id="checkbox-4" class="choices-yn-4" value="4">

<input type="text" id="container-1">
<input type="text" id="container-2">
<input type="text" id="container-3">
<input type="text" id="container-4">

脚本

$('input#checkbox-1').on('change', function () {
    $('input#checkbox-1').not(this).prop('checked', false);
    var checkedValues = $('input:checkbox:checked').map(function () {
        return this.value;
    }).get();

    $('#container-1').val(checkedValues);

});

Answer 1

尝试以下几点

$('input[type="checkbox"]').on('change', function () {
 if($(this).is(':checked')) {
    $('#container-'+$(this).attr(id).split('-')[1]).val($(this).val());
 }
});

Answer 2

使用JQuery is(":checked")

$('input[type="checkbox"]').on("change", function(e) {
    $this = $(this);
    var container_id = ($this.attr('id')).replace("checkbox","container");
    $container = $("#"+container_id);
    if($this.is(":checked")) 
        $container.val($this.val());
    else
       $container.val("");
})