JavaScriptを使用してチェックボックスの入力に基づいて動的文字列を作成します。

ページ上の表にチェックボックスのセットがあります。私がしようとしているのは、ユーザーがチェックボックスをクリックして、その値がテーブルの下に表示される場合です。複数の値を '+' で区切られた、ラインで印刷することができる。JavaScriptを使用してチェックボックスの入力に基づいて動的文字列を作成します。

<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

"a+b+c+d"

Iはbase_pro.htmlでこのコードを持っています.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); 

})

私はstrinを取得できませんチェックボックスをオンにすると表示されます。私は間違って何をしていますか？

出典

2017-06-22 Feyzi Bagirov

あなたの質問をよりよく理解するために、 "表示"することで、メイン画面やコンソールで意味しますか？それはコンソールに正しく印刷されています。 –

@J。陳メイン画面 –

DOMに連結文字列値を明示的に注入する必要があります –

テーブルの下に空のdivを作成すると、チェックボックスが有効になったときに値が表示されます。私は以下の解決策を提示しました。あなたが明示的にセイはvar vals = arr.join("+")後

テーブルの下のdivをtheresのDOMに連結された文字列値を挿入する必要が

$("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

、あなたは上記の内側にその値を挿入することができますdivとして

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

出典

2017-06-22 22:25:18

まだ表示されません。 .jsファイルが表示されないことがありますか？ –

これは単なる例でした。あなたはテーブルの後ろにdivを置く必要があります（例えばidは 'displayConcatenatedString'です） –

まだ動作していません –

JavaScriptを使用してチェックボックスの入力に基づいて動的文字列を作成します。

答えて

関連する問題