选中时查看复选框值答案

【问题标题】：See checkbox value when checked选中时查看复选框值
【发布时间】：2014-09-24 07:46:06
【问题描述】：

如果我有一个复选框列表并且它们具有相同的名称和不同的值。我想从我在新列中实时检查的复选框中写入值。我该怎么做？

<div id="checkboxes">
<input type="checkbox" name="prod" value="Option 1" checked="checked" />Option 1
<input type="checkbox" name="prod" value="Option 2" />Option 2
<input type="checkbox" name="prod" value="Option 3" />Option 3
<input type="checkbox" name="prod" value="Option 4" checked="checked" />Option 4
</div>

结果：

选项 1
选项 4

【问题讨论】：

请不要忘记验证答案。
你了解stackoverflow的工作原理吗？您发布一个问题，出现许多答案，您必须验证一个。

标签： html checkbox

【解决方案1】：

我建议你使用jQuery。这是一个可以激发您灵感的现场示例：

$("#checkboxes input").click(function () {
  $("#output").text($("#checkboxes input:checked").map(function () {
    return $(this).val();
  }).get().join());
}).click().click();

// or
// var updateOutput = function() {
//  $("#output").text($("#checkboxes input:checked").map(function () {
//    return $(this).val();
//  }).get().join());
//};
//$("#checkboxes input").click(updateOutput);
//updateOutput();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="checkboxes">
<input type="checkbox" name="prod" value="Option 1" checked="checked" />Option 1
<input type="checkbox" name="prod" value="Option 2" />Option 2
<input type="checkbox" name="prod" value="Option 3" />Option 3
<input type="checkbox" name="prod" value="Option 4" checked="checked" />Option 4
</div>
<div id="output"></div>

2 个 JS 选项：

双click
使用外部函数（在注释中）

【讨论】：

谢谢，这正是我所期待的。你一个问题。为什么我的所有复选框都被选中？我在输入中删除了checked="checked"。
如果答案是好的，你可以验证它。对于您的另一个问题，您在哪里删除了 HTML 中的选中属性？用 JS 吗？
我被删除了 HTML 中的checked="checked"。所以没人查。所以只有点击被发送到输出。
我不明白。没有checked 属性，加载时您的所有复选框都是checked？
是的，如果我从带有选项 1 和选项 4 的 HTML 复选框中删除所有 Checked="checked"，加载时都会被选中。

【解决方案2】：

您可以在您的输入上监听点击/更改事件 - 请参阅：Catch checked change event of a checkbox

然后使用jquery的val()函数获取值

【讨论】：

【解决方案3】：

var x = new Array();

$('input[name="prod"]').each(function(index){

    if($(this).is(':checked')){

        x[index] = $(this).val();

    }

});

console.log(x[0]); // 给出选项 1 控制台.log(x[1]); // 给出选项 4

x 是一个包含检查值的数组，您可以根据需要使用它！ :)

【讨论】：