jQuery checkbox click shows input field - doesn't work

Question

Hi, I use a jQuery function to show certain hidden text fields once you select something from a select box. This works fine for select boxes but I can't get it to work for a checkbox.

Here is the stripped code I tried (in a nutshell) but it's not working: http://jsbin.com/uwane3/2/

Thanks for your help, I rarely use JS so my knowledge is small.

Answer 1

You have no events registered to your checkbox.
Register a click, or change handler like this:

$('#cf3_field_9').click(function(){
  if ($(this).attr("checked")) {
      $.viewMapcf3_field_9[$(this).val()].show();
  } else {
      $.each($.viewMapcf3_field_9, function() { this.hide(); });
  }
});

http://api.jquery.com/category/events/

Answer 2

I have found 2 errors in your code:

1. your Checkbox has no value so you cant get more than an empty result form ".val()"
2. you have not bind a eventhandler to the checkbox.

http://jsbin.com/uwane3/3

  $('#cf3_field_9').live('click', function(e){
    if (e.target == $('#cf3_field_9')[0] && e.target.checked) {
        alert('The following line could only work if the checkbox have a value.');
      $.viewMapcf3_field_9[$(this).val()].show();

    } else {
        $.each($.viewMapcf3_field_9, function() { this.hide(); });
    }
  });