jQueryを使用してテキストフィールドをモーダルに表示したい。どうすればそのコードを修正できますか？チェックボックスをオンにすると、モーダルに表示されます。しかし、テキストフィールドを使用すると、何も表示されません。
体
<body>
<div id="hasildetail" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Detail</h4>
</div>
<div class="modal-body">
<p id="isidetail">
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="row">
<div class="offset-4 col-sm-8">
<form>
<h3>Please select:</h3>
<input type="checkbox" name="hobby" value="Sepak Bola"> Sepak Bola <br>
<input type="checkbox" name="hobby" value="Membaca"> Membaca <br>
<input type="checkbox" name="hobby" value="Menulis"> Menulis <br>
<input type="checkbox" name="hobby" value="Memancing"> Memancing <br>
<input type="checkbox" name="lainlain" id="lainlain" value="Lain-lain"> Lain-lain <br>
<input type="text" id="ceklain" placeholder="[ Masukkan lain-lain ]">
</form>
<button id="detail" type="button" class="btn btn-primary" data-toggle="modal" data-target="#hasildetail">Detail</button>
</div>
</div>
</body>
脚本
// Tampil ke modal detail
$(document).ready(function() {
$("#detail").click(function() {
var p = $("#hasildetail #isidetail");
$(p).html("<h4>you have selected : </h4>");
$.each($("input[name='hobby']:checked"), function() {
$(p).html($(p).html() + '<br>' + $(this).val());
});
});
});
// Checkbox Lain-lain
$(document).ready(function() {
$('#ceklain').hide();
$('#lainlain').change(function() {
if (this.checked)
$('#ceklain').show(1000);
else
$('#ceklain').hide(1000);
});
});
[1] 1つだけ使用できます$(document).ready()
[2]を変数に$(p).html() + '<b>'...追加してHTML Structureから.html(HTMLStructure)、html構造を要素に追加するために使用できるようなものを使用する必要はありません..これもで行うことが.append()できます。
[3] IDは一意である必要があり、目的の入力のIDがあるため、使用してその値を取得できます。$('#ceklain').val()
$(document).ready(function() {
// Tampil ke modal detail
$("#detail").click(function() {
var p = $("#hasildetail #isidetail");
var HTMLStructure = "<h4>you have selected : </h4>";
$.each($("input[name='hobby']:checked"), function() {
HTMLStructure += '<br>' + $(this).val();
});
HTMLStructure += $('#ceklain').val();
$(p).html(HTMLStructure);
});
// Checkbox Lain-lain
$('#ceklain').hide();
$('#lainlain').change(function() {
if (this.checked)
$('#ceklain').show(1000);
else
$('#ceklain').hide(1000);
});
});
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加