Как проверить и снять флажок, чтобы показать и скрыть div

Question

У меня есть флажок с идентификатором GlandularFever и по щелчку (который проверяет его) Я могу заставить его показать еще один DIV с полем данных name="GlandularDetails". Хотя при проверке, как мне заставить его снова скрыть этот div? Если поле данных name="GlandularDetails hidden = true затем покажет, иначе, если поле данных name="GlandularDetails hidden = false затем скрыть.

<script> 
$(document).ready(function(){ 
$("#GlandularFever").click(function(){ 

    $(document.querySelectorAll('[data-field name="GlandularDetails"]')).show(100); 
    hidden = false; 

    }); 
}); 
</script> 

    <div class="col-md-12"> 
     <div class="funkyradio"> 
      <div class="funkyradio-primary col-md-4"> 
       <input value="Yes" type="checkbox" name="GlandularFever" id="GlandularFever"/> 
       <label for="GlandularFever">Glandular Fever</label> 
      </div> 
     </div> 
    </div> 

    <div class="form-group col-md-12" data-field-name="GlandularDetails"> 
     <label class="control-label">Details</label> 
     <textarea rows="3" id="GlandularDetails" name="GlandularDetails" maxlength="100" class="form-control" placeholder=""></textarea> 
    </div> 

Спасибо

Answer 1

Попробуйте это:

$(document).ready(function() { 
    $('#GlandularFever').click(function() { 
    if ($(this).prop('checked')) { 
     $('[data-field name="GlandularDetails"]').show(100); 
    } else { 
     $('[data-field name="GlandularDetails"]').hide(100); 
    } 
    }); 
}); 

Answer 2

Вы можете использовать метод JQuery .toggle([duration ] [, complete ])

var glandularDetails = $('[data-field-name="GlandularDetails"]'); 
 
glandularDetails.hide(); 
 

 
$("#GlandularFever").click(function() { 
 
    glandularDetails.toggle(500); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="col-md-12"> 
 
    <div class="funkyradio"> 
 
    <div class="funkyradio-primary col-md-4"> 
 
     <input value="Yes" type="checkbox" name="GlandularFever" id="GlandularFever" /> 
 
     <label for="GlandularFever">Glandular Fever</label> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div class="form-group col-md-12" data-field-name="GlandularDetails"> 
 
    <label class="control-label">Details</label> 
 
    <textarea rows="3" id="GlandularDetails" name="GlandularDetails" maxlength="100" class="form-control" placeholder=""></textarea> 
 
</div>

Answer 3

Используйте toggle, чтобы чередовать скрытые и видимые.

Кроме того, избегайте использования document.querySelectorAll при использовании jQuery. Jquery автоматически обрабатывает, что:

$("#GlandularFever").click(function() { 
 
    $('[data-field-name="GlandularDetails"]').toggle(100); 
 
});

div.form-group { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="col-md-12"> 
 
    <div class="funkyradio"> 
 
    <div class="funkyradio-primary col-md-4"> 
 
     <input value="Yes" type="checkbox" name="GlandularFever" id="GlandularFever" /> 
 
     <label for="GlandularFever">Glandular Fever</label> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div class="form-group col-md-12" data-field-name="GlandularDetails"> 
 
    <label class="control-label">Details</label> 
 
    <textarea rows="3" id="GlandularDetails" name="GlandularDetails" maxlength="100" class="form-control" placeholder=""></textarea> 
 
</div>

Answer 4

проверить этот код и запустить

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
 
<script> 
 
$(document).ready(function(){ 
 
    $("div[data-field-name=GlandularDetails]").hide(); 
 
$("#GlandularFever").click(function(){ 
 
    
 
\t if($(this).is(':checked')) 
 
\t { 
 
\t \t $("div[data-field-name=GlandularDetails]").show(); 
 
\t } 
 
\t else 
 
\t { 
 
\t \t $("div[data-field-name=GlandularDetails]").hide(); 
 
\t } 
 
    }); 
 
}); 
 
</script> 
 

 
    <div class="col-md-12"> 
 
     <div class="funkyradio"> 
 
      <div class="funkyradio-primary col-md-4"> 
 
       <input value="Yes" type="checkbox" name="GlandularFever" id="GlandularFever"/> 
 
       <label for="GlandularFever">Glandular Fever</label> 
 
      </div> 
 
     </div> 
 
    </div> 
 

 
    <div class="form-group col-md-12" data-field-name="GlandularDetails"> 
 
     <label class="control-label">Details</label> 
 
     <textarea rows="3" id="GlandularDetails" name="GlandularDetails" maxlength="100" class="form-control" placeholder=""></textarea> 
 
    </div>

.