查看复选框的值时，检查

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

我建议你使用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
• 使用外部函数（在评论）

Answer 2

你可以听你的输入点击/更改事件 - 看到这一点：Catch checked change event of a checkbox

然后使用jQuery的VAL（ ）函数来获得值

Answer 3

变种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是一个数组，其中包含您可以根据您的愿望使用的选中值！ :)