如何启用在页面加载时选中的第一个复选框并仅显示数据目标 div 并隐藏其他复选框，并且一次仅选中一个复选框

Posted 2023-05-08

【中文标题】如何启用在页面加载时选中的第一个复选框并仅显示数据目标 div 并隐藏其他复选框，并且一次仅选中一个复选框

【英文标题】：How to enable first checkbox checked on page load and show only the data targeted div and hide others and only one checkbox checked at one time

【发布时间】：2021-10-24 19:51:47

【问题描述】：

如何启用在页面加载时选中的第一个复选框，该复选框仅显示数据目标 div 并隐藏其他 div（即在页面加载时默认选中 DIV1 复选框并仅显示 DIV1 并使用 jQuery first-child 隐藏其他 DIVS）。现在，我的第一个复选框在页面加载时显示已选中，但除非物理检查，否则它会显示页面加载上的所有 div。我只想显示 DIV1 检查显示数据 1 并在页面加载时隐藏其他。

请问如何使用 jQuery 一次只选中一个复选框？

选中复选框时，它应该隐藏其他 DIV 并仅显示它的数据目标 div。

这是我的代码：

$(document).ready(function () 
 $('.my-features').on('click', function () 
    var checkbox = $(this);
    var div = checkbox.data('name');
    if (checkbox.is(':checked')) 

        $('#' + div).show();
     else 
        $('#' + div).hide();
        $('#' + checkbox.attr('data-name')).hide();
    
 );    
);

$(document).ready(
 function()
  $('input:checkbox:first-child').attr('checked',true);
 
);

<input type="checkbox" data-name="div1" class="my-features" />DIV1
<input type="checkbox" data-name="div2" class="my-features" />DIV2
<input type="checkbox" data-name="div3" class="my-features" />DIV3
<input type="checkbox" data-name="div4" class="my-features" />DIV4
<input type="checkbox" data-name="div5" class="my-features" />DIV5
<input type="checkbox" data-name="div6" class="my-features" />DIV6

<div id="div1">1
</div>
<div id="div2">2
</div>
<div id="div3">3
</div>
<div id="div4">4
</div>
<div id="div5">5
</div>
<div id="div6">6
</div>

由于我对 jQuery 的了解有限，我已尽力编写代码。 提前致谢。

【参考方案1】：

只需在文档就绪时隐藏除div 之外的所有 div。此外，您应该将change 事件用于input 而不是click

要“取消选中”所有其他复选框，以便一次只选中 1 个复选框（这就是单选按钮的工作方式，也许您想改用单选按钮？）只需取消选中除正在检查的复选框之外的所有复选框$('.my-features').not(this).prop('checked', false);

您也可以使用template strings 代替经典的串联，这意味着# + div 将被替换为#$div

看看下面的 jquery only 解决方案

*免责声明。在inputs 周围添加了一个div，因为input:first-child 否则将不起作用（在sn-p 中，我们将<script> 标记作为第一个孩子）并向“显示/隐藏”div 添加了一个类

$(document).ready(function() 
  $('input[type="checkbox"]:first-child ').prop('checked', true);
  $("div.text:not(#div1)").hide()

  $('.my-features').on('change', function() 
    var checkbox = $(this);
    var div = checkbox.data('name');
    $('.my-features').not(this).prop('checked', false);  

    if (checkbox.is(':checked')) 
      $("div.text").hide();
      $(`#$div`).show();
     else 
      $(`#$div`).hide();
      
    
  );
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<input type="checkbox" data-name="div1" class="my-features" />DIV1
<input type="checkbox" data-name="div2" class="my-features" />DIV2
<input type="checkbox" data-name="div3" class="my-features" />DIV3
<input type="checkbox" data-name="div4" class="my-features" />DIV4
<input type="checkbox" data-name="div5" class="my-features" />DIV5
<input type="checkbox" data-name="div6" class="my-features" />DIV6
</div>
<div class="text" id="div1">1
</div>
<div class="text"  id="div2">2
</div>
<div class="text"  id="div3">3
</div>
<div class="text"  id="div4">4
</div>
<div class="text"  id="div5">5
</div>
<div class="text"  id="div6">6
</div>

【讨论】：

非常感谢您提供如此详细的解释以及惊人的答案。它按预期工作得很好。再次感谢您。

@pv619 这就是我们在这里的原因:) 很高兴我能提供帮助。干杯！ :D

谢谢伙计，真的很感激 :)