Question

我希望我的文本字段使用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">&times;</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);

        });
    });

Answer 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);

    });
});

如何从输入文本中获取价值并显示给我的模态？

1 个答案: