JavaScript不響應復選框
[英]JavaScript not responding to checkboxes
問題描述
我有一個帶有復選框的頁面，該復選框具有字符串值（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>
1 個解決方案
解決方案1
5 已采納 2017-06-23 17:01:49
當狀態更改時，您需要運行代碼。 本質上，頁面加載時，代碼只運行一次，但是只要復選框之一的狀態發生更改，您就希望構建字符串。
每次單擊其中一個復選框時，下面的代碼將運行問題中包含的代碼（您也可以使用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沒有響應
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.