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">
  <inputtype="checkbox"name="foo[]"id="foo-003"value="foo-003"><labelfor="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:

<liclass="option table"><divclass="option-checkbox"><divclass="check"></div><inputid="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 javascriptdocument.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.