使用JavaScript创建基于复选框输入的动态字符串

我在页面上的表格中有一组复选框。我想要做的是当用户点击复选框时，其值将打印在表格下方。多个值可以在线路被印刷，以 '+' 隔开：使用JavaScript创建基于复选框输入的动态字符串

"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); 

})

我无法获得该条款g当复选框被选中时显示。我究竟做错了什么？

来源

2017-06-22 Feyzi Bagirov

只是为了更好地理解你的问题 - 通过“显示”，你的意思是在主屏幕或控制台上？它正确地打印到控制台。 –

@J。陈主屏 –

你需要注入DOM中的连接字符串值明确 –

您可以在表格下方创建一个空的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>

来源

2017-06-22 22:24:54

你需要注入DOM中连接字符串值明确说theres见下表一个div

var vals = arr.join("+")后，你可以插入上述内部的价值div as

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

来源

2017-06-22 22:25:18

仍然没有出现。难道它没有看到.js文件？ –

这只是一个例子。你需要在表格后面有一个div（例如，使用id为'displayConcatenatedString'） –

不工作 –

使用JavaScript创建基于复选框输入的动态字符串

回答

相关问题