Javascript隐藏函数不工作 - javascript hide function not working codeigniter

我有这个jquery

$(function() {
  $('#LEAVE_ID').change(function() {
    if ($('#LEAVE_ID').val() == '1') {
      $('#1').show();
      $('#2').show();
      $('#3').show();
      $('#6').show();
    } else if($('#LEAVE_ID').val() == '2') {
      $('#4').show();
      $('#5').show(); 
    } else if($('#LEAVE_ID').val() == '7'){
      $('#specify').show(); 
    }
  });
});
$(function() {
  $('#LEAVE_ID').change(function() {
    if ($('#LEAVE_ID').val() != '1') {
      $('#1').hide();
      $('#2').hide();
      $('#3').hide();
      $('#6').hide();
    } else if($('#LEAVE_ID').val() != '2') {
      $('#4').hide();
      $('#5').hide(); 
    } else if($('#LEAVE_ID').val() != '7'){
      $('#specify').hide(); 
    }
  });
});

除了else if($('#LEAVE_ID').val() != '7'){ $('#specify').hide();

，所有这些都可以正常工作

，如果它显示div $('#specify')，整个javascript根本不起作用。

$('#1')-$('#6')为单选按钮，$('#specify')为输入类型文本

也

我也试图把.show();和.hide();在一个功能，但它不工作

html是

            <div class="box-body">
              <div class="form-group">
                <label class="col-sm-2 control-label col-sm-offset-2" for="LEAVE_ID "><span>*</span>Leave Type:</label>
                  <div class="col-sm-5">
                    <select class="form-control" name = "LEAVE_ID" id = "LEAVE_ID">
                      <option>--</option>
                        <?php foreach ($content as $leave) {?>
                          <option value="<?php echo $leave->LEAVE_ID; ?>"><?php echo $leave->LEAVE_TYPE; ?></option>
                        <?php } ?>
                    </select>
                  </div>
              </div>
            </div>
            <div class="box-body">
              <div class="form-group">
                <label class="col-sm-2 control-label col-sm-offset-2" ></label>
                  <div class="col-sm-5">
                    <div class="form-group">
                      <div class="radio" style="display:none" id = "1">
                        <label>
                          <input type="radio" id="1" name="REASON" value="To seek employment">
                          To seek employment
                        </label>
                      </div>
                      <div class="radio" style="display:none" id = "2">
                        <label>
                          <input type="radio" id="2" name="REASON"  value="With in the Philippines">
                          With in the Philippines
                        </label>
                      </div>
                      <div class="radio" style="display:none" id = "3">
                        <label>
                          <input type="radio" id="3" name="REASON"  value="Abroad">
                          Abroad
                        </label>
                      </div>
                      <div class="radio" style="display:none" id = "4">
                        <label>
                          <input type="radio" id="4" name="REASON"  value="In hospital">
                          In hospital
                        </label>
                      </div>
                      <div class="radio" style="display:none" id = "5">
                        <label>
                          <input type="radio" id="5" name="REASON"  value="Out Patient">
                          Out Patient
                        </label>
                      </div>
                      <div class="radio" style="display:none" id = "6">
                        <label>
                          <input type="radio" id="6" name="REASON"  value="Others">
                          Others
                        </label>
                      </div>
                    </div>
                  </div>
              </div>
            </div>
            <div class="box-body" style="display:none" id = 'specify'>
              <div class="form-group">
                  <label for="SPECIFY" class="col-sm-2 control-label col-sm-offset-2"><span>*</span>Specify:</label>
                    <div class="col-sm-5">
                      <textarea class="form-control" rows="4" id="SPECIFY" name="SPECIFY" ></textarea>
                    </div>
                  <div class="form-group has-error col-sm-offset-7">
                    <label class="control-label" for="error"><?php echo form_error("SPECIFY"); ?></label>
                  </div>
              </div>
            </div>

$(function() {
  $('#LEAVE_ID').change(function() {
    if ($('#LEAVE_ID').val() != '1') {
      $('#1').hide();
      $('#2').hide();
      $('#3').hide();
      $('#6').hide();
    } else if($('#LEAVE_ID').val() != '2') {
      $('#4').hide();
      $('#5').hide(); 
    } else if($('#LEAVE_ID').val() != '7'){
      $('#specify').hide(); 
    }
  });
});

这个零件的问题

让我们调试这个如果$('#LEAVE_ID').val()值5它将执行第一个如果它将不执行其余的如果它(i)。=2和=7)。像这样修改

  $(function() {
      $('#LEAVE_ID').change(function() {
        if ($('#LEAVE_ID').val() != '1') {
          $('#1').hide();
          $('#2').hide();
          $('#3').hide();
          $('#6').hide();
        } 
        if($('#LEAVE_ID').val() != '2') {
          $('#4').hide();
          $('#5').hide(); 
        }
        if($('#LEAVE_ID').val() != '7'){
          $('#specify').hide(); 
        }
      });
    });

希望能有所帮助

我所做的是

$(function() {
  $('#LEAVE_ID').change(function() {
    if ($('#LEAVE_ID').val() == '1') {
      $('#1').show();
      $('#2').show();
      $('#3').show();
      $('#6').show();
      $('#4').hide();
      $('#5').hide(); 
      $('#specify').hide(); 
    } else if($('#LEAVE_ID').val() == '2') {
      $('#1').hide();
      $('#2').hide();
      $('#3').hide();
      $('#6').hide();
      $('#4').show();
      $('#5').show(); 
      $('#specify').hide(); 
    }  else if($('#LEAVE_ID').val() == '7'){
      $('#1').hide();
      $('#2').hide();
      $('#3').hide();
      $('#6').hide();
      $('#4').hide();
      $('#5').hide(); 
      $('#specify').show(); 
    } else{
      $('#1').hide();
      $('#2').hide();
      $('#3').hide();
      $('#6').hide();
      $('#4').hide();
      $('#5').hide(); 
      $('#specify').hide();             
    }
  });

下面的函数如何。首先，你可以隐藏所有的单选按钮，而不是显示任何你想要的。签出下面的代码

$(function() {
  $(document).ready(function(){
    $('#LEAVE_ID').change(function() {
       $('div.radio').hide();
       $('#specify').hide();
      if ($(this).val() == '1') {
        $('#1,#2,#3,#6').show();
      } else if($(this).val() == '2') {
        $('#4,#5').show();
      } else if($(this).val() == '7'){
        $('#specify').show(); 
      } else {
        $('div.radio').show();
       $('#specify').show();
      }
    });
  });
});

在上面的函数中，首先更改它将隐藏所有选项，它将只显示根据所选择的leave类型的那些选项，否则它将显示所有选项。

提琴链接:https://jsfiddle.net/04jftvmb/3/