mardi 3 janvier 2017

Why is my javascript conditional text showing even when not selected

I have some conditional form inputs. Everything is working, except for my conditional checkboxes. The item for checkboxes shows, even when that condition is not selected.

jQuery(document).ready(function($) {
  // bind event handler to the checkbox
  $('input[name="Active_Status_Change"]').change(function() {
    // get input element where name attribute is starts with the checkbox value
    // and then toggle the visibility based on the checked property
    $('[name^="' + this.value + '"]').toggle(this.checked);
    // trigger the change event 
      }).change();
});
 $(document).ready(function() {
    $("#datepicker5").datepicker();
  });
<link rel="stylesheet" href="http://ift.tt/1FyNyxl">
<script src="http://ift.tt/1oMJErh"></script>
<script src="http://ift.tt/2a1Bldc"></script>
<script src="http://ift.tt/1LdO4RA"></script>
<script src="http://ift.tt/1FyNyNz"></script>
<form>
 
          <input name="Active_Status_Change" type="checkbox" value="Location" />Location&nbsp;
          <input name="Active_Status_Change" type="checkbox" value="Level of Care" />Level of Care&nbsp;
          <input name="Active_Status_Change" type="checkbox" value="Diagnosis" />Diagnosis
       
        <div id="Location">
       <div style="width:100%; margin-bottom:15px; margin-top:15px;"> <span style="width:25%; float:left">
<select name="Location From_Place" class="validate[required]" id="Location From_Place">
  <option selected="selected">From</option>
  <option value="Home">Home</option>
  <option value="Hospital">Hospital</option>
  <option value="Nursing Home">Nursing Home</option>
  <option value="Assisted Living">Assisted Living</option>
</select> </span>
       
        <span style="width:25%; float:left">
<select name="Location To_Place" class="validate[required]" id="Location To_Place">
  <option selected="selected">To</option>
  <option value="Home">Home</option>
  <option value="Hospital">Hospital</option>
  <option value="Nursing Home">Nursing Home</option>
  <option value="Assisted Living">Assisted Living</option>
  </select> </span></div> </div>
        
        
        <div id="Level of Care">  <div style="width:100%; margin-bottom:15px; margin-top:15px;"id="Level of Care">
        
        <span style="width:25%; float:left">
  <select name="Level of Care_From" class="validate[required]" id="Level of Care_From">
    <option selected="selected">From</option>
    <option value="Routine">Routine</option>
    <option value="Inpatient">Inpatient</option>
    <option value="Respite">Respite</option>
    <option value="Continuous">Continuous</option>
  </select>
</span> <span style="width:25%; float:left">
<select name="Level of Care_To" class="validate[required]" id="Level of Care_To">
  <option selected="selected">To</option>
   <option value="Routine">Routine</option>
    <option value="Inpatient">Inpatient</option>
    <option value="Respite">Respite</option>
    <option value="Continuous">Continuous</option>
</select>
</span>
<span style="width:25%; float:left"><strong>Did Location Change</strong> &nbsp;&nbsp;<br />
<input name="Level of Care_Location Change" type="radio" value="Yes" /> Yes <input name="Level of Care_Location Change" type="radio" value="No" />No</span></div></div>

         
         <div id="Diagnosis">
          <input id="Diagnosis1" name="Diagnosis_old" placeholder="Old Diagnosis" type="text" />
          <input id="Diagnosis2" name="Diagnosis_new" placeholder="New Diagnosis" type="text" />
           <input id="datepicker5" name="Diagnosis_Date" placeholder="Date of Change" type="text" />
         </div>
         </form>
       

http://ift.tt/2iLE22t

So basically the issue is why is Did Location Change showing all the time? It should only show when Level of Care is Selected.




Aucun commentaire:

Enregistrer un commentaire