Making Custom Checkboxes Work With Css - Select Or Check Not Working

I'm not able to select a checkbox and see a check in it. Somehow the css is not connected to the HTML. One of the issues is that the HTML is generated by a Django custom render fun

Solution 1:

I simplified this quite a bit I think. The trick to styling "checkboxes" is to style the label and to use the + selector so we can tell when the checkbox is checked. Here's a really simple approach.

/* Let's make our checkbox a simple green box! */
label:before {
  content: '';
  background-color: green;
  display: inline-block;
  width: 30px;
  height: 30px;
  margin-right: 5px;
  vertical-align: middle;
}

/* When the input **before** the label is checked, let's adjust it's styling. */
input:checked + label:before {
  background-color: red;
}

Here's my demo HTML

<div class="field">
  <input type="checkbox" name="foo[]" id="foo-003" value="foo-003">
  <label for="foo-003">Foo 003</label>
</div>

Here's a demo for you: http://jsbin.com/UvuNaWo/3/edit?html,css,output

It should help get things a bit clearer.

Solution 2:

Under the assumption that your complete code looks like this:

<li class="option table">
    <div class="option-checkbox"><div class="check"></div><input id="id_MyJobChoices_0" name="MyJobChoices" type="checkbox" value="_AG" /></div>
</li>

i can generally demonstrate your desired outcome by adding this:

// In plain javascript
onclick="document.getElementById('id_MyJobChoices_0').click();this.className=(document.getElementById('id_MyJobChoices_0').checked==true?'option table selected':'option table')"

// or using jQuery
onclick="$('#id_MyJobChoices_0').click();$(this).toggleClass('selected')" 

to:

<li class="option table">

resulting in:

// In plain javascript
<li onclick="document.getElementById('id_MyJobChoices_0').click();this.className=(document.getElementById('id_MyJobChoices_0').checked==true?'option table selected':'option table')" class="option table">

// or using jQuery
<li onclick="$(this).toggleClass('selected')" class="option table">  

See this fiddle for a demonstration

Please note

I used a placeholder image, instead of your check.png file.

Hints

In order to check if the checkbox is currently marked, you can use this:

// In plain javascript
document.getElementById('id_MyJobChoices_0').checked

// or using jQuery
$('#id_MyJobChoices_0').is(':checked')

I demonstrated this in the fiddle, too.

Please keep in mind that this solution is just a demonstration - there is still much room for improvement.