We Keep Coding

Showing and hiding divs with class

I have written the below script that shows and hides divs when a checkbox is clicked. It gets the checkbox value and then hides the div with that class. My problem is a div may be tagged with two checkbox values. If one of them is still ticked I'd still like the div to be shown rather than hidden as my script currently does. What is the way around that?
HTML
<fieldset class="simple-filter">
<div class="filter-wrap">
<input type="checkbox" class="filter-click" name="bmx" value="bmx" checked>
<label for="bmx">BMX</label>
</div>
<div class="filter-wrap">
<input type="checkbox" class="filter-click" name="scooter" value="scooter" checked>
<label for="scooter">Scooter</label>
</div>
<div class="filter-wrap">
<input type="checkbox" class="filter-click" name="quad" value="quad" checked>
<label for="quad">Quad/Inline</label>
</div>
</fieldset>
<div class="simple-filter-items">
<div class="bmx scooter">box 1</div>
<div class="bmx">box 2</div>
<div class="quad">box 3</div>
</div>
Script:
jQuery(document).ready(function($){
$( ".filter-click" ).change(function() {
checkboxval = $(this).val();
$(".simple-filter-items").find("." + checkboxval).toggle();
});
});
Fiddle is here https://jsfiddle.net/h5as3cwb/

You can use each loop to iterate through checked checkboxes and show divs where checkbox is checked
Demo Code :
jQuery(document).ready(function($) {
$(".filter-click").change(function() {
//hide all div
$(".simple-filter-items div").hide()
//loop throgh checked checkboxes
$(".simple-filter input[type=checkbox]:checked").each(function() {
//show them
$(".simple-filter-items").find("." + $(this).val()).show();
})
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<fieldset class="simple-filter">
<div class="filter-wrap">
<input type="checkbox" class="filter-click" name="bmx" value="bmx" checked>
<label for="bmx">BMX</label>
</div>
<div class="filter-wrap">
<input type="checkbox" class="filter-click" name="scooter" value="scooter" checked>
<label for="scooter">Scooter</label>
</div>
<div class="filter-wrap">
<input type="checkbox" class="filter-click" name="quad" value="quad" checked>
<label for="quad">Quad/Inline</label>
</div>
</fieldset>
<div class="simple-filter-items">
<div class="bmx scooter">box 1</div>
<div class="bmx">box 2</div>
<div class="quad">box 3</div>
</div>

This solution is very similar to #Swati's but uses the .filter() and .map() methods:
$( ".filter-click" ).change(function() {
const checked = $('.filter-click:checked').map((i,c) => c.value).get();
$('.simple-filter-items > div').hide()
.filter(checked.map(c => `.${c}`).join(',')).show();
});
jQuery(document).ready(function($){
$( ".filter-click" ).change(function() {
const checked = $('.filter-click:checked').map((i,c) => c.value).get();
$('.simple-filter-items > div').hide()
.filter(checked.map(c => `.${c}`).join(',')).show();
});
});
.hidden {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<fieldset class="simple-filter">
<div class="filter-wrap">
<input type="checkbox" class="filter-click" name="bmx" value="bmx" checked>
<label for="bmx">BMX</label>
</div>
<div class="filter-wrap">
<input type="checkbox" class="filter-click" name="scooter" value="scooter" checked>
<label for="scooter">Scooter</label>
</div>
<div class="filter-wrap">
<input type="checkbox" class="filter-click" name="quad" value="quad" checked>
<label for="quad">Quad/Inline</label>
</div>
</fieldset>
<div class="simple-filter-items">
<div class="bmx scooter">box 1</div>
<div class="bmx">box 2</div>
<div class="quad">box 3</div>
</div>

Finding data attribute and checkbox children

I hope you can see what I'm trying to do here.
I am trying to keep the same structure for the divs but clicking the select all in the top area only selects those 3 and the bottom select all only selects the bottom 3.
Obviously there are better ways to do this but I have stripped my code back to this basic example.
please help me rewrite this line:
$("div").find("[data-profile-id='"+profileID+"']").find(".score_alert_cb1").each(function() {
So i can use the profile-id data attribute to select the checkboxes that fall inside that div.
Thanks
$('.profile #select_all_cb').click(function() {
var profileID = $(this).closest('.profile').data('profile-id');
if($(this).is(":checked")) {
$("div").find("[data-profile-id='"+profileID+"']").find(".score_alert_cb1").each(function() {
$(this).prop('checked', true);
});
} else {
$("div").find("[data-profile-id='"+profileID+"']").find(".score_alert_cb1").each(function() { //Check all boxes
$(this).prop('checked', false);
});
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="profile" data-profile-id="1">
<div>
A lot of data before my checkbox
</div>
<div>
<input type="checkbox" id="select_all_cb">select all
</div>
<div>
<input type="checkbox" class="score_alert_cb1">
<input type="checkbox" class="score_alert_cb1">
<input type="checkbox" class="score_alert_cb1">
</div>
</div>
<br /><br />
<div class="profile" data-profile-id="2">
<div>
A lot of data before my checkbox
</div>
<div>
<input type="checkbox" id="select_all_cb">select all
</div>
<div>
<input type="checkbox" class="score_alert_cb1">
<input type="checkbox" class="score_alert_cb1">
<input type="checkbox" class="score_alert_cb1">
</div>
</div>

IDs are unique, so changed id="select_all_cb" to class="select_all_cb".
On click .select_all_cb, goes up and finds .profile parent, store the checkbox value as boolean in isChecked variable, and finds all .score_alert_cb1 checkboxes within the current .profile element.
$(".profile .select_all_cb").click(function() {
var profile = $(this).closest(".profile");
// var profileID = profile.data('profile-id');
var isChecked = $(this).is(":checked");
profile.find(".score_alert_cb1").prop("checked", isChecked);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="profile" data-profile-id="1">
<div>
A lot of data before my checkbox
</div>
<div>
<input type="checkbox" class="select_all_cb">select all
</div>
<div>
<input type="checkbox" class="score_alert_cb1">
<input type="checkbox" class="score_alert_cb1">
<input type="checkbox" class="score_alert_cb1">
</div>
</div>
<br /><br />
<div class="profile" data-profile-id="2">
<div>
A lot of data before my checkbox
</div>
<div>
<input type="checkbox" class="select_all_cb">select all
</div>
<div>
<input type="checkbox" class="score_alert_cb1">
<input type="checkbox" class="score_alert_cb1">
<input type="checkbox" class="score_alert_cb1">
</div>
</div>

What's wrong with
$("div").find("[data-profile-id='"+profileID+"']").find("[type=checkbox]")each(...}
?

How to make both event listeners work

What I am trying to be is make the first event listener use it on change when you change the option and then once you fill out the form make it pop out at the bottom of the page. I can only use Vanilla Javascript. Also if you select anything other then the 5th option it will turn gray and not be able to select any of the radio buttons. Then you fillout the form and I can't have the form submit I have to have it just drop down with innerHTML.
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<meta charset="utf-8">
<title>Create</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-6">
<form>
<!--selections inputs-->
<div class="form-group">
<label for="exampleFormControlSelect1">Example select</label>
<select class="form-control" id="select">
<option value="4">1</option>
<option value="51">2</option>
<option value="765">3</option>
<option value="74747">4</option>
<option value="1">5</option>
</select>
</div>
<!--radio inputs-->
<div class="form-check">
<input class="form-check-input" type="radio" name="color" id="red" disabled>
<label class="form-check-label" for="exampleRadios1">
Red Fleet
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="color" id="white" disabled>
<label class="form-check-label" for="exampleRadios2">
White Fleet
</label>
</div>
<div class="form-check disabled">
<input class="form-check-input" type="radio" name="color" id="blue" disabled>
<label class="form-check-label" for="exampleRadios3">
Blue Fleet
</label>
</div>
<div class="form-group">
<label for="exampleInputEmail1">change this</label>
<input type="text" class="form-control" id="date" aria-
describedby="emailHelp">
</div>
<div class="form-group">
<label for="exampleInputPassword1">change this</label>
<input type="text" class="form-control" id="location">
</div>
<div class="form-group">
<label for="exampleInputPassword1">change this</label>
<input type="text" class="form-control" id="textbox">
</div>
<button type="submit" class="btn btn-primary" id="btn">Submit</button>
</form>
</div>
<div class="col-lg-6"></div>
<p id="dateout"></p>
<p id="locationout"></p>
<p id="textboxout"></p>
</div>
</div>
<script>
window.addEventListener("DOMContentLoaded", init, false);
function init(e) {
e.preventDefault;
document.getElementById("select").addEventListener("change", start);
}//end init function
//main algorithm
function start(e) {
e.preventDefault;
short();
//child one
function short(e) {
e.preventDefault;
var blue;
var white;
var red;
var select;
select = document.getElementById("select").value;
if (select == 1) {
document.getElementById("red").disabled = false;
document.getElementById("white").disabled = false;
document.getElementById("blue").disabled = false;
document.getElementById("btn").addEventListener("click", uhjeff);
}
else {
document.getElementById("red").disabled = true;
document.getElementById("white").disabled = true;
document.getElementById("blue").disabled = true;
document.getElementById("btn").addEventListener("click", uhjeff);
}
}
}
function uhjeff(e) {
var date;
var location;
var textbox;
e.preventDefault;
document.getElementById("dateout").innerHTML = document.getElementById("date").value;
document.getElementById("locationout").innerHTML = document.getElementById("location").value;
document.getElementById("textboxout").innerHTML = document.getElementById("textbox").value;
}
</script>
</body>
</html>

You had several errors. Please read the HTML and JavaScript comments inline below for corrections.
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<meta charset="utf-8">
<title>Create</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-6">
<form>
<!--selections inputs-->
<div class="form-group">
<label for="exampleFormControlSelect1">Example select</label>
<select class="form-control" id="select">
<option value="4">1</option>
<option value="51">2</option>
<option value="765">3</option>
<option value="74747">4</option>
<option value="1">5</option>
</select>
</div>
<!--radio inputs-->
<!-- The "for" attribute of a <label> must match the "id" attribute of the
element that it is a label for. -->
<div class="form-check">
<input class="form-check-input" type="radio" name="color" id="red" value="red" disabled>
<label class="form-check-label" for="red">Red Fleet</label>
</div>
<div class="form-check">
<!-- radio buttons need to have a value for them to have meaning -->
<input class="form-check-input" type="radio" name="color" id="white" value="white" disabled>
<label class="form-check-label" for="white">White Fleet</label>
</div>
<div class="form-check disabled">
<input class="form-check-input" type="radio" name="color" id="blue" value="blue" disabled>
<label class="form-check-label" for="blue">Blue Fleet</label>
</div>
<div class="form-group">
<label for="exampleInputEmail1">change this</label>
<input type="text" class="form-control" id="date" aria-describedby="emailHelp">
</div>
<div class="form-group">
<label for="location">change this</label>
<input type="text" class="form-control" id="location">
</div>
<div class="form-group">
<label for="textbox">change this</label>
<input type="text" class="form-control" id="textbox">
</div>
<button type="submit" class="btn btn-primary" id="btnSubmit">Submit</button>
</form>
</div>
<div class="col-lg-6"></div>
<p id="dateout"></p>
<p id="locationout"></p>
<p id="textboxout"></p>
</div>
</div>
<script>
// If you script is located after all the HTML, then it is unecessary to set up a
// DOMContentLoaded event listener because, at this point, the DOM is loaded.
document.getElementById("select").addEventListener("change", start);
// Get the references to the DOM elements you'll be using just once:
var blue = document.getElementById("blue");
var white = document.getElementById("white");
var red = document.getElementById("red");
// You need a reference to the form, not the submit button, because it's the
// submit event of the form that you'll need to cancel later.
var form = document.querySelector("form");
var dateout = document.getElementById("dateout");
var date = document.getElementById("date");
var locationout = document.getElementById("locationout");
// location is a Global property of window, don't use it as a variable name
var loc = document.getElementById("location");
var textboxout = document.getElementById("textboxout");
var textbox = document.getElementById("textbox");
// You were setting the button's event handler in all cases, so it doesn't
// belong in an "if". Also, the button is a submit button, so handle the submit event
// of the form, not the click event of the button
form.addEventListener("submit", uhjeff);
//main algorithm
function start(e) {
// There is no reason to cancel the "change" event of the select.
// Also, since all this function does is call short(), just make this
// function have the contents of short()
// Since this is the change event handler for your select, you can access
// the select with the keyword "this"
if (this.value == 1) {
// You initially set the elements to be disabled with the disabled HTML attribute.
// To avoid confusion, modify the attribute, not the JavaScript property.
red.removeAttribute("disabled");
white.removeAttribute("disabled");
blue.removeAttribute("disabled");
} else {
red.setAttribute("disabled", "disabled");
white.setAttribute("disabled", "disabled");
blue.setAttribute("disabled", "disabled");
}
}
function uhjeff(e) {
e.preventDefault(); // .preventDefault() is a method, you need to add () after it.
// .innerHTML is for setting/getting strings that contain HTML
// Use .textContent when working with strings that don't have HTML
dateout.textContent = date.value;
locationout.textContent = loc.value;
textboxout.textContent = textbox.value;
}
</script>
</body>
</html>

Remove appended data on second click

I have few checkboxes. When I click on any of them I pass the value to span. Everything seems to work fine but there's something that I can't resolve. When I click first time value is passed to my span (checkbox is checked) but when I unclick this checkbox, value is passing to span again instead of delete it from my span. Next thing, when I want to write my own text I have other checkbox for that. When I click on it I see input. I cant write text and it will be appended to my span. I want to remove this value too when I unclick this checkbox. Last thing, I want to add red border to empty elements. Anyone could help me?
$('.checkbox').on('click', function(){
var dataAttr = $(this).attr('name');
var dataAttrVal = $(this).val();
$('[name="' + dataAttr + '-value"]').append(dataAttrVal + ", ");
$('#summary_' + dataAttr).append(dataAttrVal + ", ");
});
$('.component-other-value').on('change touchstart tap', function(){
var dataName = $(this).attr('data-product');
var value = $(this).val();
$('#summary_other_' + dataName).text(value);
$('[name="' + dataName + '-value"]').append(value + ", ");
});
$('.component-other').on('click', function(){
$(this).closest('.container')
.find('.component-other-value')
.prop("disabled", !this.checked);
});
input:disabled {
opacity: 0;
}
input:enabled {
opacity: 1;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-sm-3">
<div class="input-item">
<input type="checkbox" name="fruits" id="fruit-pineapple" value="Ananas" class="fruits checkbox">
<label for="fruit-pineapple"><img src="img/ananas.png"></label>
<p class="description">Ananas</p>
</div>
</div>
<div class="col-sm-3">
<div class="input-item">
<input type="checkbox" name="fruits" id="fruit-apple" value="Jabłko" class="fruits checkbox">
<label for="fruit-apple"><img src="img/jablko.png"></label>
<p class="description">Jabłko</p>
</div>
</div>
<div class="col-sm-3">
<div class="input-item">
<input type="checkbox" name="fruits" id="fruits-oth" class="component-other">
<label for="fruits-oth"><img src="img/owoce-wlasne.png"></label>
<p class="description">Własna propozycja</p>
</div>
</div>
<input type="text" name="fruits-other" id="fruits-other" class="component-other-value" data-product="fruits" placeholder="Wpisz owoce" disabled>
<div class="col-sm-3">
<div class="input-item">
<input type="checkbox" name="fruits" id="fruit-nofruit" value="Bez owoców" class="fruits checkbox">
<label for="fruit-nofruit"><img src="img/owoce-brak.png"></label>
<p class="description">Bez owoców</p>
</div>
</div>
</div>
<p>
Owoce: <br>
<span id="summary_fruits" class="summary"></span>
<span id="summary_other_fruits" class="summary" style="border-bottom: 1px solid red;"></span>
</p>
</div>

check whether the event is fired when the checkbox is checked or not checked.
$('.checkbox').on('click', function(){
if($(this).is(':checked')){
//do you logic when the checkbox is checked.
}else{
//do your logic when the checkbox is not checked.
}
});

You need to loop over all checkboxes when each checkbox is clicked
Note I wrapped the whole thing in the label.
$('.component-other-value, .fruits').on('change', function() {
var fruits = [], other = [];
$('.component-other-value, .fruits').each(function() {
if (this.checked) {
var dataName = $(this).attr('data-product');
var value = $(this).val();
if (dataName) other.push(value)
else fruits.push(value)
}
});
$('#summary_fruits').text(fruits.join(","));
$('#summary_other_fruits').text(other.join(","));
});
$('.component-other').on('click', function() {
$(this).closest('.container')
.find('.component-other-value')
.prop("disabled", !this.checked);
});
input:disabled {
opacity: 0;
}
input:enabled {
opacity: 1;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-sm-3">
<div class="input-item">
<label>
<input type="checkbox" name="fruits" id="fruit-pineapple" value="Ananas" class="fruits checkbox">
<img src="img/ananas.png">
<p class="description">Ananas</p>
</label>
</div>
</div>
<div class="col-sm-3">
<div class="input-item">
<label>
<input type="checkbox" name="fruits" id="fruit-apple" value="Jabłko" class="fruits checkbox">
<img src="img/jablko.png">
<p class="description">Jabłko</p>
</label>
</div>
</div>
<div class="col-sm-3">
<div class="input-item">
<label>
<input type="checkbox" name="fruits" id="fruits-oth" class="component-other">
<img src="img/owoce-wlasne.png">
<p class="description">Własna propozycja</p>
</label>
</div>
</div>
<input type="text" name="fruits-other" id="fruits-other" class="component-other-value" data-product="fruits" placeholder="Wpisz owoce" disabled>
<div class="col-sm-3">
<div class="input-item">
<label>
<input type="checkbox" name="fruits" id="fruit-nofruit" value="Bez owoców" class="fruits checkbox">
<img src="img/owoce-brak.png">
<p class="description">Bez owoców</p>
</label>
</div>
</div>
</div>
<p>
Owoce: <br>
<span id="summary_fruits" class="summary"></span>
<span id="summary_other_fruits" class="summary" style="border-bottom: 1px solid red;"></span>
</p>
</div>

$('.checkbox').on('click', function(){
var check = $(this);//PROPERTIES OF CLICKED CHECKBOX
var dataAttr = $(this).attr('name');
var dataAttrVal = $(this).val();
if (check.prop('checked')==true){ // check weather checkbox is checked.
$('[name="' + dataAttr + '-value"]').append(dataAttrVal + ", ");
$('#summary_' + dataAttr).append(dataAttrVal + ", ");
}
else { //if not remove the occurence of value that you unchecked
str = $('#summary_' + dataAttr).html();
$('#summary_' + dataAttr).html(str.replace(dataAttrVal+", ",""));
}
});
$('.component-other-value').on('change touchstart tap', function(){
var dataName = $(this).attr('data-product');
var value = $(this).val();
$('#summary_other_' + dataName).text(value);
$('[name="' + dataName + '-value"]').append(value + ", ");
});
$('.component-other').on('click', function(){
$(this).closest('.container')
.find('.component-other-value')
.prop("disabled", !this.checked);
});
input:disabled {
opacity: 0;
}
input:enabled {
opacity: 1;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-sm-3">
<div class="input-item">
<input type="checkbox" name="fruits" id="fruit-pineapple" value="Ananas" class="fruits checkbox">
<label for="fruit-pineapple"><img src="img/ananas.png"></label>
<p class="description">Ananas</p>
</div>
</div>
<div class="col-sm-3">
<div class="input-item">
<input type="checkbox" name="fruits" id="fruit-apple" value="Jabłko" class="fruits checkbox">
<label for="fruit-apple"><img src="img/jablko.png"></label>
<p class="description">Jabłko</p>
</div>
</div>
<div class="col-sm-3">
<div class="input-item">
<input type="checkbox" name="fruits" id="fruits-oth" class="component-other">
<label for="fruits-oth"><img src="img/owoce-wlasne.png"></label>
<p class="description">Własna propozycja</p>
</div>
</div>
<input type="text" name="fruits-other" id="fruits-other" class="component-other-value" data-product="fruits" placeholder="Wpisz owoce" disabled>
<div class="col-sm-3">
<div class="input-item">
<input type="checkbox" name="fruits" id="fruit-nofruit" value="Bez owoców" class="fruits checkbox">
<label for="fruit-nofruit"><img src="img/owoce-brak.png"></label>
<p class="description">Bez owoców</p>
</div>
</div>
</div>
<p>
Owoce: <br>
<span id="summary_fruits" class="summary"></span>
<span id="summary_other_fruits" class="summary" style="border-bottom: 1px solid red;"></span>
</p>
</div>

How check and uncheck of a checkbox can show and hide a div

I have a checkbox with ID GlandularFever and on click (which checks it) I can get it to show another DIV with data-field name="GlandularDetails". Though on un-check, how do I get it to hide that div again? If data-field name="GlandularDetails hidden = true then show, else if data-field name="GlandularDetails hidden = false then hide.
<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>
Thank you

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

You can use the JQuery method .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>

Use toggle to alternate between hidden and visible.
Also, avoid document.querySelectorAll when using jQuery. jQuery automatically handles that:
$("#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>

check this code and run
<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(){
if($(this).is(':checked'))
{
$("div[data-field-name=GlandularDetails]").show();
}
else
{
$("div[data-field-name=GlandularDetails]").hide();
}
});
});
</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>
.