在复选框选择上显示div

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');
  }
});

一旦选中任何复选框，我需要显示按钮。单击复选框时没有任何反应。我究竟做错了什么？我需要从按钮中删除.hidden。

Answer 1

如果检查集合中的任何元素，.is(':checked')将返回true：

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

请注意，贴出的标记没有.choose_style或homestyles元素？

Answer 2

尝试：

$('.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

你的代码中有很多错误。我修复了一些它们使它工作http://jsfiddle.net/aamir/jNU4B/

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