I Can't Hide/Show Textbox when radio button is checked-CodePudding

Here is my html code & jquery, I want to hide the no. bpjs textbox when bpjs radio is checked. I don't think if my code is wrong, but i don't know why my code doesn't work.

                        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
                        <div >
                            <label >Pengobatan</label>
                            <div >
                                <div >
                                    <input type="radio" id="umum" onclick="w3.show('#nomor_bpjs')" name="pengobatan"  value="Umum" value="<?= set_value('pengobatan') ?>">
                                    <label  for="umum">Umum</label>
                                </div>
                                <div >
                                    <input type="radio" id="bpjs" onclick="w3.hide('#nomor_bpjs')" name="pengobatan"  value="BPJS" value="<?= set_value('pengobatan') ?>">
                                    <label  for="bpjs">BPJS</label>
                                </div>
                            </div>
                        </div>
                        <div  id="no_bpjs">
                            <label for="no_bpjs" >No. BPJS </label>
                            <div >
                                <input type="text"  id="nobpjs" name="nobpjs" placeholder="Masukan Nomor BPJS" value="<?= set_value('no_bpjs') ?>">
                            </div>
                        </div>

And my 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 
                    $('.nobpjs').fadeIn();
                } else if ($('input[id="umum"]').on('click')) {
                    //hide div with class= "nama"
                    $('.nobpjs').hide();
                } else {
                    $('.nobpjs').hide();
                }

            });
        });
    </script>

I want to hide the no. bpjs textbox when bpjs radio is checked

CodePudding user response：

Your mistake was calling your elements as a class instead of as a id. In jQuery element IDs are called using $('#idName') and classes are called using $('.className').

I fixed those mistakes in the code below and I also removed onclick attributes from the checkboxs.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<div >
   <label >Pengobatan</label>
   <div >
      <div >
         <input type="radio" id="umum" name="pengobatan"  value="Umum" value="<?= set_value('pengobatan') ?>">
         <label  for="umum">Umum</label>
      </div>
      <div >
         <input type="radio" id="bpjs" name="pengobatan"  value="BPJS" value="<?= set_value('pengobatan') ?>">
         <label  for="bpjs">BPJS</label>
      </div>
   </div>
</div>
<div  id="no_bpjs">
   <label for="no_bpjs" >No. BPJS </label>
   <div >
      <input type="text"  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>

CodePudding user response：

It looks like you are trying to hide/show an element with nobpjs class but you don't have it in your html, instead you have an element with nobpjs id.

<input type="text"  id="nobpjs"