使用 JavaScript 根据复选框输入创建动态字符串答案

【问题标题】：Create a dynamic string based on checkbox input using JavaScript使用 JavaScript 根据复选框输入创建动态字符串
【发布时间】：2017-06-23 06:25:18
【问题描述】：

我在页面上的表格中有一组复选框。我想要做的是当用户点击复选框时，它的值将打印在表格下方。可以一行打印多个值，用'+'分隔：

"a+b+c+d"

我在 base_pro.html 中有这段代码：

 <html>
  <head>
    <title>{% block title %}Offer engineering{% endblock %}</title>
    {% block css %}
    <link rel="stylesheet" href="/static/css/reset-min.css" />
    <link rel="stylesheet" href="/static/css/main.css" />
    {% endblock %}
    {% block script %}
    <script src="/static/js/main.js" type="text/javascript"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="/static/js/my_jq.js"></script>
    {% endblock %}
  </head>
  <body>
    <div id="header">{% block header %}{% endblock %}</div>
    <div id="messages-wrap">
      <div id="messages">
        {% for category, msg in get_flashed_messages(with_categories=true) %}
          <p class="message flash-{{ category }}">{{ msg }}</p>
        {% endfor %}
      </div>
    </div>
    <div id="content">{% block content %}{% endblock %}</div>
    <div id="footer">{% block footer %}{% endblock %}</div>
  </body>
</html>

main.html:

{% extends "base_pro.html" %}
{% block content %}
Hi {{ user.name }}!

<table style="width:100%">
<tr>
<th>v1</th>
<th>v2</th>
<th>v3</th> 
<th>v4</th>
<th>v5</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>
    <td><label><input type="checkbox" name="selected" value="d" class="offers" />d</label></td>
</table>


{% endblock %}

my_js.js：

$("input[type=checkbox]").on("change", function(){
var arr = []
$(":checkbox").each(function(){
   if($(this).is(":checked")){
     arr.push($(this).val())
   }
})
var vals = arr.join("+")
var str = vals
console.log(str);

})

选中复选框时，我无法显示字符串。我究竟做错了什么？

【问题讨论】：

只是为了更好地理解您的问题 - “显示”是指在主屏幕上还是控制台上？它正在正确打印到控制台。
@J.陈主屏
你需要在 DOM 中显式地注入串联的字符串值
@KaushalNiraula 我该怎么做？

标签： javascript jquery html checkbox

【解决方案1】：

您可以在表格下方创建一个空 div，该 div 将在复选框被激活时显示该值。我在下面提出了一个解决方案。

$("input[type=checkbox]").on("change", function(){
var arr = []
$(":checkbox").each(function(){
   if($(this).is(":checked")){
     arr.push($(this).val())
   }
})
var vals = arr.join("+");
var str = vals;
$("#val").text(str);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="width:100%">
<tr>
<th>v1</th>
<th>v2</th>
<th>v3</th> 
<th>v4</th>
<th>v5</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>
    <td><label><input type="checkbox" name="selected" value="d" class="offers" />d</label></td>
</table>
<div id="val"></div>

【讨论】：

【解决方案2】：

您需要在 DOM 中显式地注入连接的字符串值说桌子下面有一个div

在var vals = arr.join("+") 之后，您可以将该值插入到上述div 中

$('#displayConcatenatedString').html(vals)

【讨论】：

仍然没有出现。莫非是看不到.js文件？
这只是一个例子。您需要在表格后有一个 div（例如，带有 id displayConcatenatedString）