Fey*_*rov 1 html javascript checkbox jquery
我有一个页面,其复选框有字符串值(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包含在页面的标题中,这意味着它将在任何正在呈现的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('+'));
})
})
另一种选择是附加到文档的处理程序,但这应该足以让你前进.
| 归档时间： |
|
| 查看次数： |
51 次 |
| 最近记录： |