html hiddenで値を取得し、label名で表示させたい。

Question

簡単な質問かもしれませんが教えて頂きたいです。

modalウインドウでチェックボックスで選択した情報を親のウインドウで表示させたいです。
valueの値は、取得できるようになったのですが、
valueの値は、hiddenで取得し、label名でフォームに表示させたいのですが、上手くできません。

type属性をhiddenにした場合、チェックボックスがなくなってしまうため、どのようにhiddenで値を渡すことができるのかお聞きしたいです。

よろしくお願いします。

 <div class="md-form form-group">
    <input type="text" class="form-control" id="sId" name="sId"  th:value="${sId}" readonly>
  　<label for="staId">駅</label>
 </div>

<div class="form-row" id="materiaUncheckeds" >　
　<div class="form-check">
 　<input type="checkbox" class="form-check-input" id="materialUnchecked2" value="2">
 　<label class="form-check-label" for="materialUnchecked2">東京</label>
　</div>
</div>

$('#sId').on('click', function () {
        $('#modal').modal();
    });
    
    $('#modal-st').on('click', function () {
    	var values = []; 
    	$("#materiaUncheckeds").find('input:checked').each(function (i, e){
    		values.push($(e).val());
    	});

Answer 1

<input type="checkbox" class="form-check-input" id="materialUnchecked2" value="2"><label>東京</label>
<input type="hidden" id="hidecheck2" value="2" />

// jQuery
$('#modal-st').on('click', function () {
   $('#hidecheck2').val($('#materialUnchecked2').val());
}

checkboxの値をhidden要素にコピーしたら良いのではないでしょうか？

Comments

[icezoom]

返信ありがとうございます。
type="hidden"にしていまうと、チェックボックス選択できなくなってしますのですが。。。

[madone99]

単にcheckboxの値をコピーしたいのかと思ったのですが、
ご質問の意味がよく分かっておらず失礼しました。

checkboxを表示して、要素はhiddenにするというのは、
どういう背景があっての事なんでしょうか？

[icezoom]

返信が遅くなり申し訳ございません。
チェックボックスで選択した駅名を親のウインドウで表示させたいのですが、valueには、データベースで
振り分けている番号を値で持たせて、表示名は「東京」というようにしたいです。
説明が不十分かもしれませんが、よろしいお願いします。

[madone99]

意図にあうかわかりませんが、回答を編集しました。
クリックした時に、checkboxの値をhiddenへコピーするのは変わっていません。

[icezoom]

早急にご回答ありがとうございます。
一度試してみます。。

[madone99]

やられたい内容がはっきり理解しておりませんので、内容は適宜ご編集下さい。