mardi 24 août 2021

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

  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.




Aucun commentaire:

Enregistrer un commentaire