Question

我在JS中有脚本：

<script>
  $(document).ready(function () {
   $('#new_logo_box').click(function (event) {
    if (this.checked) {
      $('#basic_info').slideDown(400); }
    else {
      $('#basic_info').slideUp(400);}
    });                                        
   });
</script>

现在我想用备用逻辑运算符检查多个输入。我该怎么办？我在尝试：

<script>
      $(document).ready(function () {
       $('#new_logo_box').click(function (event) ||
       $('#renew_logo_box').click(function (event) {
        if (this.checked) {
          $('#basic_info').slideDown(400); }
        else {
          $('#basic_info').slideUp(400);}
        });                                        
       });
</script>

但这不起作用......

Answer 1

您可以在单个选择器中列出要应用事件处理程序的所有项目，如下所示：

  $(document).ready(function () {
   $('#new_logo_box, #renew_logo_box').click(function (event){
    if (this.checked) 
      $('#basic_info').slideDown(400);         
    else 
      $('#basic_info').slideUp(400);
   });
  });

使用此功能，当单击列出的任何项目时，将执行您的逻辑。

为了满足您仅在未选中任何内容时隐藏基本信息的需要，您可以使用以下内容：

  $(document).ready(function () {
   var counter = 0;
   $('#new_logo_box, #renew_logo_box').click(function (event){
    if (this.checked) 
      counter++;
    else 
      counter--;

    if (counter > 0) 
      $('#basic_info').slideDown(400);         
    else 
      $('#basic_info').slideUp(400);
   });
  });

使用此方法，您可以根据需要向事件处理程序添加任意数量的元素，而无需调整事件处理程序。

Answer 2

您可以单独选择每个元素，并使用add将事件监听器添加到它们中：

var newLogoBox = $('#new_logo_box');
var renewLogoBox = $('#renew_logo_box');

newLogoBox.add(renewLogoBox).on('change', function () {
    if (newLogoBox.prop('checked') || renewLogoBox.prop('checked')) {
        $('#basic_info').slideDown(400);
    } else {
        $('#basic_info').slideUp(400);
    }
});

具有检查值的两个以上输入的备用逻辑运算符

2 个答案: