Adding class based on checkbox selection

Question

I am trying to simply create code that checks whether an checkbox input has been checked. I have tried both prop and is(':checked'). I don't understand why my class is not adding.

Does anyone see what is wrong?

if($('#checkText').is(':checked')) {
		$('#notiPhone').addClass('active');
		console.log('Text box should be showing');
	}
	else {
		$('#notiPhone').removeClass('active');
		console.log('Text box should NOT be showing');
	}

#notiEmail, #notiPhone {
	display: none;
	transition: all .4s ease;
}
#notiEmail.active, #notiPhone.active {
	display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
	<input type="text" name="notiName" placeholder="Name">
	<p>What type of notifications would you like to receive?</p>
	<label>Text Notifications</label>
	<input type="checkbox" name="checkText" id="checkText" value="text">
	<label>Email Notifications</label>
	<input type="checkbox" name="checkEmail" id="checkEmail" value="email">
	<input type="email" name="notiEmail" id="notiEmail" placeholder="Email*">
	<input type="tel" name="notiPhone" id="notiPhone" placeholder="Phone*">
</form>

Because you are checking if it is checked when document is loaded not when it is changed. Use $('#notiPhone').change(function() { ...}) — Void Spirit
– Void Spirit, Commented May 17, 2019 at 14:18

Moob · Accepted Answer · 2019-05-17 16:45:17Z

3

FYI you can do this with just CSS (no JS required):

#notiEmail, #notiPhone {
  display: none;
}

#checkText:checked~#notiPhone {
  display: block;
}

#checkEmail:checked~#notiEmail {
  display: block;
}

<form>
  <input type="text" name="notiName" placeholder="Name">
  <p>What type of notifications would you like to receive?</p>
  <label>Text Notifications</label>
  <input type="checkbox" name="checkText" id="checkText" value="text">
  <label>Email Notifications</label>
  <input type="checkbox" name="checkEmail" id="checkEmail" value="email">
  <input type="email" name="notiEmail" id="notiEmail" placeholder="Email*">
  <input type="tel" name="notiPhone" id="notiPhone" placeholder="Phone*">
</form>

UPDATE

Is there anyway to hide the sibling input and uncheck the check box so that only one input would show?

Use radio buttons instead:

#notiEmail, #notiPhone {
  display: none;
}

#checkText:checked~#notiPhone {
  display: block;
}

#checkEmail:checked~#notiEmail {
  display: block;
}

/* 
  Make radio buttons look like checkboxes.
  (Eurgh. Not recommended.)
*/
input[type="radio"] {
  -webkit-appearance: checkbox; 
  -moz-appearance: checkbox;    
  -ms-appearance: checkbox; 
}

<form>
  <input type="text" name="notiName" placeholder="Name">
  <p>What type of notifications would you like to receive?</p>
  <label for="checkNone">No notifications</label>
  <input type="radio" name="notifymethod" id="checkNone" checked="checked" value="none">
  <label for="checkText">Text Notifications</label>
  <input type="radio" name="notifymethod" id="checkText" value="text">
  <label for="checkEmail">Email Notifications</label>
  <input type="radio" name="notifymethod" id="checkEmail" value="email">
  <input type="email" name="notiEmail" id="notiEmail" placeholder="Email*">
  <input type="tel" name="notiPhone" id="notiPhone" placeholder="Phone*">
</form>

edited May 17, 2019 at 16:45

answered May 17, 2019 at 14:34

Moob

16.5k1 gold badge40 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Paul Over a year ago

Nice. I didn't know there was a way to do this in CSS, Thanks!

Paul Over a year ago

Is there anyway to hide the sibling input and uncheck the check box so that only one input would show?

Moob Over a year ago

@Paul You could simply user radio buttons instead of checkboxes. See update.

Paul Over a year ago

Thanks. I need the checkboxes for this specific case though

Moob Over a year ago

@Paul Are you sure it has to be checkboxes. That's bad from a UX perspective since checkboxes are for selecting multiple options but here you're wanting the customer to pick only one of the options (not both). This is exactly what a radio button is for.

|

Dimitri Mockelyn · Accepted Answer · 2019-05-17 14:19:14Z

2

You are showing/not showing your text box only at the beggining of your javascript, but you do not listen to the changes in the checkbox. You can correct this by adding

$('#checkText').change(function() {
...
})

Like this :

$('#checkText').change(function() {
if($('#checkText').is(':checked')) {
		$('#notiPhone').addClass('active');
		console.log('Text box should be showing');
	}
	else {
		$('#notiPhone').removeClass('active');
		console.log('Text box should NOT be showing');
	}
});

#notiEmail, #notiPhone {
	display: none;
	transition: all .4s ease;
}
#notiEmail.active, #notiPhone.active {
	display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
	<input type="text" name="notiName" placeholder="Name">
	<p>What type of notifications would you like to receive?</p>
	<label>Text Notifications</label>
	<input type="checkbox" name="checkText" id="checkText" value="text">
	<label>Email Notifications</label>
	<input type="checkbox" name="checkEmail" id="checkEmail" value="email">
	<input type="email" name="notiEmail" id="notiEmail" placeholder="Email*">
	<input type="tel" name="notiPhone" id="notiPhone" placeholder="Phone*">
</form>

answered May 17, 2019 at 14:19

Dimitri Mockelyn

1,5452 gold badges11 silver badges17 bronze badges

1 Comment

Juan Over a year ago

inside of the change event there's no need to search for the checkbox on the DOM again, you can validate if it was checked or not with this.checked , this will be the reference to the checkbox element on the DOM

Joseph · Accepted Answer · 2019-05-17 14:27:37Z

0

you should listen to the change event of the checkbox

$('#checkText').change( () => {

  if($('#checkText').is(':checked')) {
    $('#notiPhone').addClass('active');
    console.log('Text box should be showing');
  } else {
   $('#notiPhone').removeClass('active');
   console.log('Text box should NOT be showing');
  }

});

answered May 17, 2019 at 14:27

Joseph

6925 silver badges17 bronze badges

Collectives™ on Stack Overflow

Adding class based on checkbox selection

3 Answers 3

9 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

9 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related