Question

.I use custom form elements on form.

<fieldset>
  <legend id="Cities">Cities</legend>
  <div class="legend-underline"></div>
  <div class="filters" id="Cities-filters">
  <div>
   <span class="checkbox" style="background-position: 0pt -34px;"></span>
   <input type="checkbox" value="Adelaide" class="styled" name="sidecity" id="sidecity-control-name-0">
   <label for="sidecity-control-name-0">Adelaide (58)</label>
  </div>                    
</fieldset>

[Update]

var inputs = $('.filters-widget.bordered div[class!="filters"]');
 inputs.each(function (index, element) { 
$(element).click("click", function () {
 console.log(element); 
});
 }); 

When I click on div the method log() is called twice.

How to solve this problem ?

Answer 1

Bind an event handler to the checkbox click event. You can determine whether the checkbox is checked or not by inspecting the checked attribute in your handler:

$('#sidecity-control-name-0').click(function() {
    console.log(this.checked);
});

http://jsfiddle.net/qgR42/