Javascript 在div中显示复选框的选定值

正文中有两个复选框和一个div，我想在div“contents”中显示数据值二的选定值

$（文档）.ready（函数（）{
$（'.chkbx'）。单击（函数（）{
var selected=“”；
$（'.chkbx:checked'）。每个（函数（）{
所选+=$（'.chkbx'）.attr（'data-valuetwo'）+'，'；
});
selected=selected.substring（0，selected.length-1）；
$（'.selecteditems'）.val（选中）；
});
});

迈克
杰森
所选选项：
您在这里犯了两个错误

您的
selecteditems
是一个id而不是类
您需要使用
this
而不是class
$（this.attr（'data-valuetwo'）

$（文档）.ready（函数（）{
$（'.chkbx'）。单击（函数（）{
var selected=“”；
$（'.chkbx:checked'）。每个（函数（）{
所选+=$（this.attr（'data-valuetwo'）+'，'；
});
selected=selected.substring（0，selected.length-1）；
$（'#selecteditems'）.val（选中）；
$（'#divId'）.html（选中）；
});
});

迈克
杰森
所选选项：
您的代码中有两个问题：

1） 您必须使用
此
关键字以当前复选框为目标，并

2） 您正在使用类符号（
）而不是id（
）


$（文档）.ready（函数（）{
$（'.chkbx'）。单击（函数（）{
var selected=“”；
$（'.chkbx:checked'）。每个（函数（）{
所选+=$（this.attr（'data-valuetwo'）+'，'；
});
selected=selected.substring（0，selected.length-1）；
$（'#selecteditems'）.val（选中）；
});
});

迈克
杰森
所选选项：
不要使用click事件，而是使用（'change'）
事件上的
。使用
this
获取事件处理程序中复选框的数据值二的值

$(document).ready(function() {
    var selected = "";
    $('.chkbx').on('change', function() {
        selected += $(this).attr('data-valuetwo') + ',';
        selected = selected.substring(0, selected.length - 1);
        $('#selecteditems').val(selected);
    });
});

您可以使用
prop
检查复选框是否选中。然后使用变量压缩该值，并使用
val
在
textarea
中显示。在取消选中时，可以使用字符串替换删除复选框的值并更新文本区域


$（文档）.ready（函数（）{
让textAreaVal=''；
$（'.chkbx'）。单击（函数（）{
如果（$（this）.prop（“选中”））{
textAreaVal+=''+$（this）.data（'valuetwo'）；
}否则{
让数据=$（this.data（'valuetwo'））
textAreaVal=textAreaVal.replace（新的RegExp（数据，“g”），“”）；
}
$（'#selecteditems'）.val（textAreaVal.trim（））
})
});

迈克
杰森
所选选项：
如果在事件发生后初始化所选的变量，则无论何时启动按钮/复选框，该变量都将重新初始化，并且它存储的值将丢失。将您的代码更改为以下测试代码

$(document).ready(function () {
                var selected = "";
                $('.chkbx').change(function () {
                    selected += $(this).attr('data-valuetwo') + ',';
                    selected = selected.substring(0, selected.length - 1);
                    $('#selecteditems').val(selected);
                });
            });

您正在使用$（'.selecteditems'）.val（选中）调用该类。尝试将其更改为$（'#selecteditems'）.val（选中）；因为它是一个ID，如果我想显示在div而不是textarea中呢？我认为如果我更改它，代码会是相同的。@MinUD，在这种情况下，你只需使用
text（）
属性而不是
val（）
：）@Mamum谢谢你，最后一个问题，如果我想添加一个换行符而不是逗号呢？@MinUD，如果你想在单独的行中使用
'\n'
像
$（this）.attr（'data-valuetwo'）+'\n'
或
.join（'\n'）
..谢谢：）\n对我不起作用，它只是在选择之间添加了一个空格如果我想在div中而不是文本区域中显示呢？我认为如果我更改它，代码将是相同的..
$（'#divId'）.html（选中）这将在div中更新。也在我的代码中更新