Question

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

<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

Answer 1

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

然后使用jquery＆＃val;（）函数来获取值

Answer 2

我建议您使用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选项：

double click
使用外部功能（在评论中）

Answer 3

var x = new Array（）;

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

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

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

    }

});

的console.log（X [0]）; //给出选项1 的console.log（X [1]）; //给出选项4

x是一个数组，其中包含您可以根据自己的意愿使用的选中值！：）

选中时查看复选框值

3 个答案: