Javascript 如何获取所有选中复选框的名称？

在我的HTML站点的末尾，我想显示所有选中复选框的名称

例如，如果我有以下复选框：

<input type="checkbox" name="Product1" value="149"  id="checkbox_1" autocomplete="off"/>
<input type="checkbox" name="Product2" value="249"  id="checkbox_2" autocomplete="off"/>
<input type="checkbox" name="Product3" value="349"  id="checkbox_3" autocomplete="off"/>

如果他什么也没选，什么也不应该出现

var names = $(':checkbox:checked').map(function(){ return this.name; });
if (names.length) {
    console.log(names.get().join(','));
}

不过，如果他们有一个共享类就更好了，那么您可以使用

$('.theclass').filter(':checked').map(function(){ return this.name; });

//演示示例
$（函数（）{
//得到所有的产品
变量$allProducts=$（'.product'）；
//获取要将结果写入的区域
变量$selectedProductsList=$（“#selectedProducts”）；
//拿到标签
变量$selectedProductsLabel=$（“#selectedProductsLabel”）；
//单击复选框时，请执行以下操作
$allProducts.on（'click'，function（））{
//设置结果的内容
$selectedProductsListing.html(
//仅返回已检查的内容
$allProducts.filter（“：checked”）.map（函数（索引，复选框）{
//返回一个带有名称的div字符串以供显示
返回“”+复选框。名称+“”；
}).get（）.join（“”）//获取字符串数组，并以零进行连接
);
//如果未选中任何复选框，则隐藏标签
如果（$selectedProductsListing.text（）.trim（）.length）{
$selectedProductsLabel.show（）；
}否则{
$selectedProductsLabel.hide（）；
}
});
});

所选产品：
您可以查看以下代码片段：


$（“输入”）。单击（函数（）{
var seList=$（“输入：选中”）.map（函数（v）{
返回（此名称）；
})
$（“#info”）.html（seList.join（“
”）
})

谢谢！如何打印结果？使用控制台日志更新@我使用的颜色：文件。写（姓名）；然后我得到了正确的[object object]，因为names是一个jQuery对象。如果您查看my console.log，您将看到我正在执行一个
get（）
来获取字符串数组，然后我将
join（'，'）
将它们合并到一个字符串中进行打印。好的，但是我如何在我的代码中实现它而无需按下按钮？你能给我举个例子吗非常感谢。
$('.theclass').filter(':checked').map(function(){ return this.name; });