根据复选框选择添加课程

Question

我正在尝试简单地创建用于检查是否已选中复选框输入的代码。我已经尝试过prop和is(':checked')。我不明白为什么我的课没加。

有人看到错了吗？

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>

Answer 1

仅供参考，您可以仅使用CSS（无需JS）来做到这一点：

#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>

更新

  

反正还有隐藏同级输入并取消选中复选框以便仅显示一个输入吗？

改为使用单选按钮：

#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>

Answer 2

您仅在开始使用javascript时才显示/不显示文本框，但是您没有听取复选框中的更改。您可以通过添加

来更正此问题

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

喜欢这个：

$('#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>

Answer 3

您应该收听复选框的更改事件

$('#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');
  }

});