使用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創建基於複選框輸入的動態字符串

回答

相關問題