show div on checkbox select

Question

HTML:

<div class='row homes center'>
  <div class='span1'></div>

  <div class='row homes center'>
    <div class='span1'></div>

    <div class='hometype span2'>
      <div class='checked'></div>

      <label for='prairie'>
        <img src='img/prairie.png' >
      </label>

      <input id='prairie' name='hometypes' type='checkbox' value='Prairie'>
    </div>

    <div class='hometype span2'>
      <div class='checked'></div>

      <label for='traditional'>
        <img src='img/traditional.png'>
      </label>

      <input id='traditional' name='hometypes' type='checkbox' value='Traditional'>
    </div>

    <div class='hometype span2'>
      <div class='checked'></div>

      <label for='transitional'>
        <img src='img/transitional.png'>
      </label>

      <input id='transitional' name='hometypes' type='checkbox' value='Transitional'>
    </div>

    <div class='hometype span2'>
      <div class='checked'></div>

      <label for='bungalow'>
        <img src='img/bungalow.png'>
      </label>

      <input id='bungalow' name='hometypes' type='checkbox' value="Bungalow">
    </div>
  </div>

  <div class='fixed_button homes hidden'>
    <a class='button blue_button continue continue_type'>Continue &rarr;</a>
  </div>
</div>

jQuery:

$('.choose_style input[type="checkbox"]').on('change', function () {
  if ($('input[name=homestyles]:checked').val()) {
    $('.homes').removeClass('hidden');
  }
});

I need the button to display once any of the checkboxes are checked. Nothing happens when checkbox is clicked though. What am I doing wrong? I need to remove the .hidden from the button.

Answer 1

.is(':checked') returns true if any of the elements in the collection are checked :

$('.choose_style input[type="checkbox"]').on('change', function () {
    if ( $('input[name=homestyles]').is(':checked') ) {           
        $('.homes').removeClass('hidden');
    }
});

note that the posted markup has no .choose_style or homestyles elements ?

Answer 2

Try:

$('.hometype  input[type="checkbox"]').on('change', function (){
    if ($('input[name="hometypes"]').is(':checked')) {           
        $('.fixed_button.homes').removeClass('hidden');
    }
    else{
        $('.fixed_button.homes').addClass('hidden');
    }
});

Fiddle here.

Answer 3

You have so many mistakes in your code. I fixed few of them to make it work http://jsfiddle.net/aamir/jNU4B/

$('input[type="checkbox"]').on('change', function () {
    if ($('input[name=homestyles]:checked')) {
        $('.homes').removeClass('hidden');
    }
 });