JavaScript不响应复选框

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 个解决方案

解决方案1
5 已采纳 2017-06-23 17:01:49

JavaScript不响应复选框

问题描述

1 个解决方案

解决方案1 5 已采纳 2017-06-23 17:01:49

解决方案1
5 已采纳 2017-06-23 17:01:49