我有一个页面，其中的复选框具有字符串值(A、B、C)。我正在尝试创建一个应用程序，它根据所选复选框的值在屏幕上构建一个字符串，由“+”分隔，例如“A+B+C”或“A+B”等。
然而，当复选框被选中时，我的 div 没有显示。
我做错了什么？
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
var arr = $(".offers:checked").map(function() {
return $(this).val();
}).get();
$('#displayConcatenatedString').html(arr.join('+'));
</script>
<div id="displayConcatenatedString"></div>
<table style="width:100%">
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
</tr>
<tr>
<td><label><input type="checkbox" name="selected" value="A" class="offers" />A</label></td>
<td><label><input type="checkbox" name="selected" value="B" class="offers" />B</label></td>
<td><label><input type="checkbox" name="selected" value="C" class="offers" />C</label></td>
</tr>
</table>最佳答案
您需要在状态更改时运行您的代码。本质上，您的代码在页面加载时运行一次，但您希望在其中一个复选框状态发生变化时构建您的字符串。
每次单击其中一个复选框时，下面的代码将运行您的问题中包含的代码(您也可以使用 change 事件)。
$(".offers").on("click", function(){
var arr = $(".offers:checked").map(function(){
return $(this).val();
}).get();
$('#displayConcatenatedString').html(arr.join('+'));
})
此外，您的脚本 my_jq.js 包含在页面的 header 中，这意味着它将在呈现任何 HTML 之前运行。这意味着上面建议的点击处理程序永远不会触发。有几种方法可以处理它。一种是将脚本移动到页面底部。
<body>
...stuff...
<script src="my_jq.js" type="text/javascript"></script>
</body>
和/或您可以包装上面的脚本以在页面准备好时加载。
$(function(){
$(".offers").on("click", function(){
var arr = $(".offers:checked").map(function(){
return $(this).val();
}).get();
$('#displayConcatenatedString').html(arr.join('+'));
})
})
另一个选项是附加到文档的处理程序，但这应该足以让您继续。
关于JavaScript 不响应复选框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44726524/