Question

我有一个带复选框的页面，其中包含字符串值（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>

Answer 1

您需要在状态更改时运行代码。基本上，您的代码在页面加载时运行一次，但是当您的一个复选框声明更改时，您希望构建字符串。

每次单击其中一个复选框时，下面的代码都会运行问题中包含的代码（您也可以使用change事件）。

$(".offers").on("click", function(){
  var arr = $(".offers:checked").map(function(){
  return $(this).val();
    }).get();
  $('#displayConcatenatedString').html(arr.join('+'));  
})

此外，您的脚本my_jq.js包含在页面的标题中，这意味着它将在任何正在呈现的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没有响应复选框

1 个答案: