How to hide the check mark in a checkbox when selected

Question

I am having checkboxes in a table of 23 columns and 7 rows. I want to style checkboxs in such a way that , hide the check mark when selected. To identify the checked items , I need to change the background image of the checkbox like fill it with a color. Can someone tell me how can this be done in Jquery/Javascript and CSS? I tried using Javascript plugin from http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/custom-form-elements.js Included this Js in my php page added class= styled. It dosen't seem to be working.

Here is the code of my checkbox:

 <div id="checkboxes">
          <table id="custom-interval-tbl" class="form-layout" cellpadding="0" cellspacing="0">
              <?php foreach($days_of_week as $short => $long): ?>
                <tr>
                      <th scope="row"><?echo"<b>".$short."</b>"?></b></th>
                      <?php for($hour = 0; $hour <= 23; ++$hour): ?>
                        <td><input type="checkbox" class="styled" name="custom_interval[<?=$short?>][<?=$hour?>]" value="<?=$hour?>" <?=isset($custom_intervals[$short][$hour]) ? 'checked="checked"' : ''?> /></td>
                      <?php endfor; ?>
                </tr>
                 <?php endforeach; ?>
          </table>
          </div>
        </div>

Do I need to change anything in the script? Thanks for our suggestions.

Imagine us reading your question... how could you help by just having the info provided in the question? — Roko C. Buljan, Aug 09 '12 at 17:55
Sounds like you're stomping on default functionality of the checkbox. Don't do that. Create your own custom element. — Gabe, Aug 09 '12 at 17:55
Possible duplicate: http://stackoverflow.com/questions/4148499/how-to-style-checkbox-using-css — Alexander, Aug 09 '12 at 17:56
Helpful hint here. If you're trying to solve a Javascript/jQuery/HTML/CSS problem then please don't clutter up the code sample with PHP script that isn't really part of the problem, we don't need to see that. Just give us a straight js/jq/HTML/CSS snippet instead (and optionally an example on jsFiddle). Trying to read the code above is hard and many users will just walk on by. Thanks. — Kev, Aug 11 '12 at 01:22

score 0 · Answer 1 · answered Aug 09 '12 at 17:59

0

$(document).ready(function() {
  $('input:checkbox').on('change', function(){
    $(this).hide();
 }
});

answered Aug 09 '12 at 17:59

Mark

6,762
1
33
50

score 0 · Answer 2 · answered Aug 09 '12 at 18:26

0

You can use this form element styling jquery plugin.

http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/

Just you need to use a background image without checked icons.

Attached a sample background image to use withoud checked icons. you can simply replace it with original one. enter image description here

answered Aug 09 '12 at 18:26

Abhishek

838
1
6
9

Thanks! how can I download the image you have attached? – user1028428 Aug 09 '12 at 19:16

score -1 · Answer 3 · edited Apr 12 '18 at 03:38

-1

Put this code in your css file:

 input[type="checkbox"]:focus{
 outline:none !important; }

Here :focus indicates the state when you select a checkbox. And outline attribute points the outline (but on focus as in code). It will affect all the checkboxes in your table, and won't show any checkmark after selecting.

edited Apr 12 '18 at 03:38

4b0

21,981
30
95
142

answered Apr 05 '16 at 10:09

Aksh1693

59
7

Hi, welcome to SO. Please don't just dump code as an answer, explain your thoughts to your fellow programmers. Cheers. – Cthulhu Apr 05 '16 at 10:30
Ya sure mate. :) Sorry for replying so late. – Aksh1693 May 06 '16 at 12:09

score -1 · Answer 4 · edited Apr 12 '18 at 01:58

-1

document.getElementById("input_checkbox_id").checked = false;

edited Apr 12 '18 at 01:58

Samuel Liew

76,741
107
159
260

answered Apr 12 '18 at 00:28

user9633361

1

How to hide the check mark in a checkbox when selected

4 Answers4