Question

我是jQuery的新手。在我的代码中，我有两个复选框。默认情况下会选中复选框1。我的问题是，当我选中第二个复选框时，它显示文本框，如果我点击第一个复选框，它就不会消失。

只有在单击第二个复选框时才会出现文本框，否则文本框应该消失。

＆＃13;

$(document).ready(function () {
	$('.requirement-freqncy').hide();
	$('#post-buying-urgent').change(function () {
		if ($('#post-buying-urgent').is(':checked')){
			$('.requirement-freqncy').slideDown('slow');
		}
		else{
			$('.requirement-freqncy').slideUp('slow');
		}
	});
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row margin-lft-right-0">
<div class="col-sm-4 pad-left-zero"><input checked="checked" id="post-buying-regular" name="optradio" type="radio"> Regular Requirement</div>
<div class="col-sm-6"><input id="post-buying-urgent" name="optradio" type="radio"> Urgent Requirement</div>
</div>
<div class="form-group requirement-freqncy"><label>Requirement Frequency</label> <select class="form-control">
<option>Please Select</option>
<option>Yearly</option>
<option>Biannual (Twice a Year)</option>
</select></div>

＆＃13;

Answer 1

通过单击其组中的另一个来强制单选按钮取消选中，实际上不会触发该单选按钮的change事件 - 仅触发单击的按钮。你可以做的是将监听器应用于：

$('#post-buying-urgent, #post-buying-regular').change(function() { ...

$(document).ready(function () {
	$('.requirement-freqncy').hide();
	$('#post-buying-urgent, #post-buying-regular').change(function () {
		if ($('#post-buying-urgent').is(':checked')){
			$('.requirement-freqncy').slideDown('slow');
		}
		else{
			$('.requirement-freqncy').slideUp('slow');
		}
	});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row margin-lft-right-0">
<div class="col-sm-4 pad-left-zero"><input checked="checked" id="post-buying-regular" name="optradio" type="radio"> Regular Requirement</div>
<div class="col-sm-6"><input id="post-buying-urgent" name="optradio" type="radio"> Urgent Requirement</div>
</div>
<div class="form-group requirement-freqncy"><label>Requirement Frequency</label> <select class="form-control">
<option>Please Select</option>
<option>Yearly</option>
<option>Biannual (Twice a Year)</option>
</select></div>

或者，如果这些是您唯一的单选按钮，请将它们应用于单选按钮而不指定ID：

('input[type=radio]').change(function() { ...

$(document).ready(function () {
	$('.requirement-freqncy').hide();
	$('input[type=radio]').change(function () {
		if ($('#post-buying-urgent').is(':checked')){
			$('.requirement-freqncy').slideDown('slow');
		}
		else{
			$('.requirement-freqncy').slideUp('slow');
		}
	});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row margin-lft-right-0">
<div class="col-sm-4 pad-left-zero"><input checked="checked" id="post-buying-regular" name="optradio" type="radio"> Regular Requirement</div>
<div class="col-sm-6"><input id="post-buying-urgent" name="optradio" type="radio"> Urgent Requirement</div>
</div>
<div class="form-group requirement-freqncy"><label>Requirement Frequency</label> <select class="form-control">
<option>Please Select</option>
<option>Yearly</option>
<option>Biannual (Twice a Year)</option>
</select></div>

或者，还有另一种选择，将选择器更改为他们共享的名称：

$('[name=optradio]').change(function() { ...

$(document).ready(function () {
	$('.requirement-freqncy').hide();
	$('[name=optradio]').change(function () {
		if ($('#post-buying-urgent').is(':checked')){
			$('.requirement-freqncy').slideDown('slow');
		}
		else{
			$('.requirement-freqncy').slideUp('slow');
		}
	});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row margin-lft-right-0">
<div class="col-sm-4 pad-left-zero"><input checked="checked" id="post-buying-regular" name="optradio" type="radio"> Regular Requirement</div>
<div class="col-sm-6"><input id="post-buying-urgent" name="optradio" type="radio"> Urgent Requirement</div>
</div>
<div class="form-group requirement-freqncy"><label>Requirement Frequency</label> <select class="form-control">
<option>Please Select</option>
<option>Yearly</option>
<option>Biannual (Twice a Year)</option>
</select></div>

Answer 2

您只将更改事件绑定到紧急单选按钮，而不是两者。将您的代码更改为（$('#post-buying-urgent, #post-buying-regular')）：

$(document).ready(function() {
  $('.requirement-freqncy').hide();
  $('#post-buying-urgent, #post-buying-regular').change(function() {
    if ($('#post-buying-urgent').is(':checked')) {
      $('.requirement-freqncy').slideDown('slow');
    } else {
      $('.requirement-freqncy').slideUp('slow');
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row margin-lft-right-0">
  <div class="col-sm-4 pad-left-zero"><input checked="checked" id="post-buying-regular" name="optradio" type="radio"> Regular Requirement</div>
  <div class="col-sm-6"><input id="post-buying-urgent" name="optradio" type="radio"> Urgent Requirement</div>
</div>
<div class="form-group requirement-freqncy"><label>Requirement Frequency</label> <select class="form-control">
<option>Please Select</option>
<option>Yearly</option>
<option>Biannual (Twice a Year)</option>
</select></div>

如何使用`if`，`else`作为复选框？

2 个答案: