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

Question

1. How to enable First checkbox checked on page load that shows only the data targeted div and hide other divs (i.e. on pageload DIV1 checkbox checked by default and show only DIV1 and hide other DIVS using jQuery first-child). Right now, my first checkbox is showing checked on pageload but it's showing all the the divs on pageload unless physically checked. I just want to show DIV1 checked showing data 1 and hide others on pageload.

2. How can I have only one Checkbox checked at one time using jQuery please?

3. When a Checkbox is checked it should hide other DIV and show it's data targeted div only.

This is my code:

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

I tried my best with the code as I have limited jQuery knowledge. Thanks in advance.

Answer 1

Just hide all divs except div on doc ready.Also, you should use change event for input not click

To 'uncheck' all other checkboxes so you have only 1 checkbox checked at a time ( that's how radio buttons work btw, maybe you want to use radio buttons instead ?) just uncheck all the checkboxes except the one that is being checked $('.my-features').not(this).prop('checked', false);

You can also use template strings instead of classic concatenation meaning that # + div will be replaced by #${div}

Take a look below for jquery only solution

*Disclaimer. Added a div around the inputs because input:first-child won't work otherwise ( in the snippet we have the <script> tag as the first child ) and added a class to the '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>