选中单选按钮时我无法隐藏/显示文本框

Question

这是我的 html 代码和 jquery，我想隐藏编号。 选中 bpjs 无线电时的 bpjs 文本框。 我不认为我的代码是否错误，但我不知道为什么我的代码不起作用。

                        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
                        <div class="form-group row">
                            <label class="col-form-label col-sm-2 pt-0">Pengobatan</label>
                            <div class="col-sm-10">
                                <div class="custom-control custom-radio custom-control-inline">
                                    <input type="radio" id="umum" onclick="w3.show('#nomor_bpjs')" name="pengobatan" class="minimal" value="Umum" value="<?= set_value('pengobatan') ?>">
                                    <label class="detail" for="umum">Umum</label>
                                </div>
                                <div class="custom-control custom-radio custom-control-inline">
                                    <input type="radio" id="bpjs" onclick="w3.hide('#nomor_bpjs')" name="pengobatan" class="minimal" value="BPJS" value="<?= set_value('pengobatan') ?>">
                                    <label class="detail" for="bpjs">BPJS</label>
                                </div>
                            </div>
                        </div>
                        <div class="form-group row" id="no_bpjs">
                            <label for="no_bpjs" class="col-sm-2 col-form-label">No. BPJS </label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="nobpjs" name="nobpjs" placeholder="Masukan Nomor BPJS" value="<?= set_value('no_bpjs') ?>">
                            </div>
                        </div>

还有我的jQuery

        <script>
        $(function() {
            $('.nobpjs').hide();

            //show it when the checkbox is clicked
            $('input[id="bpjs"]').on('click', function() {
                if ($(this).prop('checked')) {
                    //show div with class="nama"
                    $('.nobpjs').fadeIn();
                } else if ($('input[id="umum"]').on('click')) {
                    //hide div with class= "nama"
                    $('.nobpjs').hide();
                } else {
                    $('.nobpjs').hide();
                }

            });
        });
    </script>

我想隐藏号码。 检查 bpjs 无线电时的 bpjs 文本框

Answer 1

您的错误是将您的元素称为class而不是id 。 在 jQuery 中，元素 ID 使用$('#idName')调用，类使用$('.className')调用。

我在下面的代码中修复了这些错误，并且还从复选框中删除了onclick属性。

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <div class="form-group row"> <label class="col-form-label col-sm-2 pt-0">Pengobatan</label> <div class="col-sm-10"> <div class="custom-control custom-radio custom-control-inline"> <input type="radio" id="umum" name="pengobatan" class="minimal" value="Umum" value="<?= set_value('pengobatan') ?>"> <label class="detail" for="umum">Umum</label> </div> <div class="custom-control custom-radio custom-control-inline"> <input type="radio" id="bpjs" name="pengobatan" class="minimal" value="BPJS" value="<?= set_value('pengobatan') ?>"> <label class="detail" for="bpjs">BPJS</label> </div> </div> </div> <div class="form-group row" id="no_bpjs"> <label for="no_bpjs" class="col-sm-2 col-form-label">No. BPJS </label> <div class="col-sm-10"> <input type="text" class="form-control" id="nobpjs" name="nobpjs" placeholder="Masukan Nomor BPJS" value="<?= set_value('no_bpjs') ?>"> </div> </div> <script> $(function() { $('#nobpjs').hide(); //show it when "nama" is clicked $('#bpjs').on('click', function() { if ($(this).prop('checked')) { $('#nobpjs').fadeIn(); } }); //Hide it when "umum" is clicked $('#umum').on('click', function() { if ($(this).prop('checked')) { //hides umum //$('#nobpjs').hide(); $('#nobpjs').fadeOut(); //looks nice } }); }); </script>

Answer 2

看起来您正在尝试隐藏/显示一个带有nobpjs类的元素，但您的 html 中没有它，而是有一个带有nobpjs id 的元素。

<input type="text" class="form-control" id="nobpjs"