can you check a hidden checkbox if it's immediate parent is hidden as well?

Question

I would like to check and uncheck a hidden an HTML checkbox based on a related event.

Unfortunately when i attempt to do this and i look at dev tools in firefox and chrome. It does not seem to be possible.

I am using jQuery to check and uncheck the hidden checkbox. I can only do it if the checkbox is shown.

Thanks

Why not quickly make it visible (out of visibility) check it, hide it, then reattach it to its original place? — Zim84, Apr 07 '18 at 19:20

score 1 · Accepted Answer · answered Apr 07 '18 at 19:32

It just work, but its attribute checked will not show in the devtool, you can use console.log() to test if checkbox is checked

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    #hiddenbox,
    #hiddenBox {
      visibility: hidden;
    }
  </style>
</head>

<body>
  <button id="button1">click</button>
  <div id="hiddendiv">
    <input id="hiddenbox" type="checkbox">
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script>
    $('#button1').on('click', function () {
      $('#hiddenbox').prop('checked', true);
      console.log($('#hiddenbox').prop('checked'));
    });
  </script>
</body>

</html>

thanks, i didn't realize the the devtools do not get updated. i just checked using console.log and i realized that the checkbox does change but that change is not reflected in the devtools. — Dan, Apr 07 '18 at 21:36

Abslen Char · Answer 2 · 2018-04-07T19:37:54.833

One way to do it is to use visibility:hidden to hide your checkbox or use opacity:0 ,you can also use display:none, then you can check if it's checked or not

in the snippet below , I checked the checkbox programaticly while the display is hidden using Jquery then test if the checkbox is checked or not

$("button").on("click",()=>{
  $('input').prop('checked', true);
 if($('input').is(':checked')){
   console.log("checked")
 }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" style="display:none">
<button>Check the hidden checkbox</button>

can you check a hidden checkbox if it's immediate parent is hidden as well?

2 Answers2