Question

我预先选中了一个复选框，上面写着“使用个人资料地址”，下面显示了地址。

现在我想要的是，如果客户取消选中此复选框，则隐藏的预先显示的地址将被隐藏，并出现一个新的输入，显示添加其他地址。

我尝试使用此 JS 技巧来做到这一点。但是无法实现我想要的。有人可以帮忙吗？

    $('#address-checked').change(function(){
        if (this.checked) {
            $('#address-sh').fadeIn('slow');
        } else {
            $('#address-sh').fadeOut('slow');
        }                   
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="address-checked" checked="checked" class="mb-3">
    <label class="car-list-step-equipment-label">Use profile address</label>
    <address> 9 Longacre Road<br />London, GB, E17 4DT</address>
    <div id="address-sh">
      <input type="text" />
    </div>

Answer 1

您只是隐藏/显示了错误的HTML元素。将选择器更改为仅address元素可解决此问题。但是，再进一步一点，如果您初始化文本框及其标签以使其一开始就被隐藏，那么您根本不需要if/else语句。选中复选框后，您只需切换地址和文本框即可。

$('#address-checked').on("change", function(){
  // You don't need and if/then here. Just toggle the visibility
  $('address').toggle('slow');
  $('.hidden').toggle('slow');              
});

.hidden { display:none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="address-checked" checked="checked" class="mb-3">
<label class="car-list-step-equipment-label">Use profile address</label>
<address>
  9 Longacre Road<br>
  London, GB, E17 4DT
</address>
<div id="address-sh" class="hidden">
  <label>Enter new address: <input type="text"></label>
</div>

此外，JQuery不再建议使用快捷方式事件方法，例如change。相反，建议使用on()方法，将事件名称传递给该方法。

最后（FYI），请勿自行终止HTML标记。这是XHTML时代遗留下来的语法，在今天实际上毫无用处。实际上，使用该语法实际上会在代码中引入错误。 Read this for details.

Answer 2

，然后出现一个新输入，说添加其他地址。

添加此新输入，并根据用户执行的检查/取消检查来切换显示：

$('#address-checked').change(function() {
  $('#address-sh').toggle(!this.checked);
  $('address').toggle(this.checked);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="checkbox" id="address-checked" checked="checked" class="mb-3">
<label class="car-list-step-equipment-label">Use profile address</label>
<address>9 Longacre Road<br />London, GB, E17 4DT</address>
<div id="address-sh" style="display: none">
  Enter new address: <input type="text" />
</div>

Answer 3

您已给ID输入类型的文本div，并尝试使用地址标签

$('#address-checked').change(function(){
	if ($(this).is(':checked')) {
	  $('#address').fadeIn('slow');
	  $('#address-sh').fadeOut('slow');
	} else {
	$('#address').fadeOut('slow');
	  $('#address-sh').fadeIn('slow');
	 }                   
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="address-checked" checked="checked">
 <label class="car-list-step-equipment-label">Use profile address</label>
          <address id="address">
            9 Longacre Road<br />
            London, GB, E17 4DT
          </address>
          
          <div id="address-sh" style="display:none;">
          <input type="text" />
          </div>

取消选中时隐藏元素

3 个答案: