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

Question

如何启用在页面加载时选中第一个复选框，该复选框仅显示目标数据 div 并隐藏其他 divs（即在页面加载时 DIV1 复选框默认选中并仅显示 DIV1 并使用 jQuery first-child 隐藏其他 DIVS）。现在，我的第一个复选框在页面加载时显示已选中，但它在页面加载时显示所有 divs，除非实际选中。我只想显示 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 知识有限，我已尽力使用代码。提前致谢。

Answer 1

只需在文档 ready.Also 上隐藏除 div 之外的所有 div，您应该对 input 使用 change 事件而不是 click

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

您也可以使用 template strings 而不是 classic 连接，这意味着 # + div 将被替换为 #${div}

请查看下面的 jquery 唯一解决方案

*免责声明。在 inputs 周围添加了一个 div，因为 input:first-child 否则将不起作用（在代码片段中，我们将 <script> 标记作为第一个子标记）并添加了一个 class 到 'show/hide' divs

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

如何启用在页面加载时选中的第一个复选框并仅显示目标数据 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

html

checkbox

jquery

show-hide