Python ＨＴＭＬでラジオボタンで複数項目を項目設定したいのですがうまくいきません。

下記ラジオボタンで複数項目を項目設定したいのですがうまくいきません。

set_1、set_2をVALUEで返しset_1は画面項目１に、set_2は画面項目２に戻して設定したいです。
現在、画面項目3にvalue値がすべてカンマ区切りで表示されてしまいます。

Pythonにて取得したquerysetをforにてラジオボタンをつけて一覧表示しました。
このラジオボタンが選択された行の項目を全て元の画面に戻して表示させたいのです。

よろしくお願いします。

Python　HTML　マクロ　javascript
1
2コード

{% macro commercial_dialog dialog_id select_name submit_button_id %}

<div class="modal" id="{{ dialog_id }}" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">タイトル</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <table class="table table-striped search_datatable small-table"> <thead> <tr> <th></th> <th>年度</th> <th>excel名</th> </tr> </thead> <tbody> {% for set_data in queryset_data %} <tr> <td><input type="radio" name="{{ select_name }}" value="{{set_1}},{{set_2}}}}" checked></td> <td>{{set_1}}</td> <td>{{set_2}}</td> </tr> {% endfor %} </tbody> </table> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">閉じる</button> <button type="button" id="{{ submit_button_id }}" class="btn btn-primary" data-dismiss="modal">選択</button> </div> </div> </div> </div> {% endmacro %}

{% block content %}

<div> <ul class="nav nav-tabs" role="tablist"> <li role="presentation" class="nav-item"><a href="#cm" class="nav-link" aria-controls="profile" role="tab" data-toggle="tab">選択タブ</a></li> </ul> <div class="tab-content">  <div role="tabpanel" class="tab-pane list_tab-pane table-responsive" id="cm"> {% if user_function_authority.publish_commercial_coastal == True or user_function_authority.publish_commercial_offshore == True %} <h1>登録</h1> <form action="/url" method="POST"> {% csrf_token %} <div class="form-group row"> <div class="col-2 width-150px high-80px float-left"> <label class="col-form-label">{{ form.cm.label_tag }}</label> </div> <div class="col-8 width-150px high-80px float-left"> {{ form.cmledger.errors }} {{ form.cmledger|add_class:"form-control" }} </div>  <div class="col-2"> <a href="#" data-toggle="modal" data-target="#cm_ledger_dialog1"></a> </div> <div class="col-2 width-150px high-80px float-left"> <label class="col-form-label">{{ form.cm_ledger.label_tag }}</label> </div> <div class="col-8 width-150px high-80px float-left"> {{ form.cm_ledger.errors }} {{ form.cm_ledger|add_class:"form-control" }} </div>  <div class="col-2"> <a href="#" data-toggle="modal" data-target="#cm_dialog2">検索</a> </div> <div class="col-2 width-150px high-80px float-left"> <label class="col-form-label">{{ form.cm_ledger.label_tag }}</label> </div> <div class="col-8 width-150px high-80px float-left"> {{ form.cm_ledger.errors }} {{ form.cm_ledger|add_class:"form-control" }} </div> </div> </div>

            <input type="submit" name="印刷" value="Publish">
        </form>
        <br>
        {% endif %}

            <input type="submit" name="印刷" value="Publish">
        </form>
    </div>
</div>

</div>

{% use_macro cm_ledger_dialog1 'cm_ledger_dialog1' 'cm_ledger_select1' 'cm_ledger_select_button1' %}
{% use_macro cm_ledger_dialog2 'cm_ledger_dialog2' 'cm_ledger_select2' 'commercial_dna_ledger_select_button2' %}

{% block scripts %}

K_3578

2021/03/10 07:26

ソースコードはMarkDownの<code>ブロック内に貼り付けてください。質問は編集できますので。

yambejp

2021/03/10 07:26

HTMLの書式ではありません HTMLで提示するか、ご利用の言語を明記してください

nan_c

2021/03/10 08:19

チェックボックスだと複数行選択できてしまいます。イメージのように1行選択のみです。年度とexcel名を戻したいのですが無理でしょうか？よろしくお願いします。

hatena19

2021/03/10 08:49

提示のコードはHTMLではないです。HTMLを提示するか、ご利用のツールを明記してください。あと、HTMLだけではできないと思いますので、JS を使っているならそれも提示してください。

退会済みユーザー

2021/03/10 09:25

なんかvueっぽい気がする。vue.jsのdatabindの話かなこれ。わからんけども。

K_3578

2021/03/11 01:21

hatena19さんも仰られているけど、質問者さんの利用ツール、使用言語などが明らかにならないと回答を得るのは難しいかと思いますが･･･。それと最初に指摘したようにソースコードは MarkDownの<code>ブロック内に貼り付けてください。

行動規範の内容に同意します

回答4件

質問を読み違えてい為下記の回答はスルーしてください。

~~ラジオボタンは単数選択のときに使います。
複数選択可能な場合はチェックボックスを使ってください。
~~

<input type="radio"> - HTML: HyperText Markup Language | MDN
グループ内でラジオボタンは一つしか同時に選択することができません

適切なフォームの選択項目は？radio,checkbox,select|マークアップブログ

投稿2021/03/10 07:59

編集2021/03/10 08:26

hatena19

総合スコア33715

nan_c

2021/03/10 08:07

行選択になりますが不可能でしょうか？イメージ添付します。

hatena19

2021/03/10 08:23 編集

質問を読み違えてました。複数選択ではなく、複数項目ということですね。私の回答はスルーしてください。

行動規範の内容に同意します

自己解決

$('#cm_ledger_select_button3').on('click', function() {
var selected = $('input[name="cm_ledger_select1"]:checked').val();
let select_b = selected.split(',');
$('#id_cm1_ledger').val(select_b[0]);
var selected = $('input[name="cm_ledger_select2"]:checked').val();
$('#id_cm2_ledger').val(select_b[1]);
var selected = $('input[name="cm_ledger_select3"]:checked').val();
$('#id_cm3_dna_ledger').val(select_b[2]);
});

これで解決しました。
ご意見ありがとうございました。

投稿2021/03/11 01:26

nan_c

総合スコア4

value={{set_1}},{{set_2}}
これを
value="{{set_1}},{{set_2}}"
こう変えるとか？

以下蛇足です。
必要な情報が開示されるまでチラシ裏でございます。
何でどう処理してるか見えないと直せないかなぁ。
僕は見えても直せるかどうか分からないのだけども。

追記です。
value="{{set_1}},{{set_2}}}}"
set_2側の}}が余計だと思う。
そろそろ言語やフレームワークを明らかにしてもらえないと考えるの辛い。

投稿2021/03/10 09:38

編集2021/03/11 01:10

退会済みユーザー

総合スコア0

受け側の問題もありますがJSONで渡すとかどうでしょう？

HTML
1<?PHP
2var_dump(json_decode(filter_input(INPUT_GET,"r1"),JSON_OBJECT_AS_ARRAY));
3?>
4<form>
5<label><input type="radio" name="r1" value='{"year":2019,"file":"a.xls"}'>2019 a.xls</label><br>
6<label><input type="radio" name="r1" value='{"year":2019,"file":"b.xls"}'>2019 b.xls</label><br>
7<label><input type="radio" name="r1" value='{"year":2019,"file":"c.xls"}'>2019 c.xls</label><br>
8<label><input type="radio" name="r1" value='{"year":2019,"file":"d.xls"}'>2019 d.xls</label><br>
9<label><input type="radio" name="r1" value='{"year":2019,"file":"e.xls"}'>2019 e.xls</label><br>
10<input type="submit" value="send">