Code snippets to have a certain checkbox checked by default and hidden
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

Hi,

So on a webpage I have a checkbox, user constently messup with it or dont understand what to do.
I would like to have a code snippet to have this checkbox checked by default and I would like to completely hide it (I dont want to erase it because I need it when the form is submitted).

I use Woocommerce + Woocommerce Subscriptions, ideally I dont want a snippet that directly modify the code of these plugins because I would have to edit them at each update.
I would like a snippet or a css rule.

Here is the code of the checkbox :
https://codepen.io/cdbsas/pen/Nexdjb

Thank you for your help

Hi, kindly award the bounty to the appropriate solution / ask for improvement else this bounty will expire in 24hrs
SilverHood Apps 1 month ago
1 month ago

Crowdsource coding tasks.

2 Solutions


New:

CSS:

<style type="text/css">
    .woocommerce-input-wrapper > label {
        display: none; 
    }
</style>

JS:

<script type="text/javascript">
    document.getElementById("update_all_subscriptions_addresses").checked = true;
</script>

(OLD)
Use this:

<span class="woocommerce-input-wrapper">
   <label class="checkbox " style="visibility:hidden;">
      <input type="checkbox" class="input-checkbox" 
        name="update_all_subscriptions_addresses" 
        id="update_all_subscriptions_addresses" value="1" checked>
                 Update the address for my subscription             
      <span class="optional">(optional)</span>
   </label>
 </span>

For future re-use:

Here the child is input and parent is lable..

1) So add the checked attribute to child to make it default checked

2) Using css in-line rule style="visibility:hidden;" to hide the parent (containing the child i.e input)

For future reuse:
Here the parent is lable and child is input..
So add the checked attribute to child and
hide the parent using css in-line rule style="visibility:hidden;"
SilverHood Apps 1 month ago
Hi, Thank you for taking the time to answer. But I dont want to directly edit this HTML code, I want to have a "remote code" like a css rule that I could put in my style.css that would only impact "updateallsubscriptions_addresses" I hope that it's clearer.
cdbsas 1 month ago
Ok noted, so tere will be need for JavaScript & best if you use jQuery ?
SilverHood Apps 1 month ago
it's ok with me. Thank you
cdbsas 1 month ago
Hi, I've updated the answer with pure css & js. There's no dependency on jQuery meaning page loads quicker, one less library. Add the lines to respective style.css (as requested) and any of your existing js script & you're good to go..
SilverHood Apps 1 month ago

Put this javascript in your code:

$(function(){
   var $container = $(".woocommerce-input-wrapper").has("#update_all_subscriptions_addresses" );
   $container.css({'visibility':'hidden','display':'block','width':0,'height':0});
   $container.find("[type='checkbox']").prop('checked', true);
  });

See there solution in codepen: https://codepen.io/anon/pen/RErpgp#anon-login

Instead of #updateallsubscriptions_addresses you can use a class to make it generic and hide all checkbox that you need
Stefano Balzarotti 1 month ago
Instead of #update_all_subscriptions_addresses you can use a class to make it generic and hide all checkbox that you need
Stefano Balzarotti 1 month ago
for example you can use .input-checkbox to hide all checkboxes
Stefano Balzarotti 1 month ago
For future reference, you can use display: none instead of the whole shebang with the 0x0 hidden block.
CyteBode 1 month ago
@CyteBode, have you tried to use display none? as far I know, all input fields with display none are disabled, If you try to post a form with display none, no value is passed in the http request.
Stefano Balzarotti 1 month ago
I was a bit skeptical and tried it. display: none is actually not affecting the checkbox's ability to be part of the parameters once it's checked, whether with checked in HTML or .checked = true in JavaScript.
CyteBode 1 month ago
@CyteBode I done a further investigation, it seems an issue of old browsers: https://stackoverflow.com/questions/8318428/submit-form-fields-inside-displaynone-element/8318442 Sorry I remember that I encountered that bug several years ago, and I haven't tried anymore with modern browsers.
Stefano Balzarotti 1 month ago
IE8 for example doesn't work
Stefano Balzarotti 1 month ago
I was an issue practically in any browsers until few years ago, if you want support old browsers better to use visibility:hidden
Stefano Balzarotti 1 month ago
Interesting! That's definitely a good thing to keep in mind if old browser compatibility is required. Thanks for taking the time to back your claim.
CyteBode 1 month ago
View Timeline