javascript - $(this).is (':checkbox' ) 阻止检查

Question

我有一个绑定(bind)到三个元素的点击函数，第一个只是触发它检查两个单选按钮并用选中的值声明一个变量，第二个是复选框并用这些值声明变量，第三个元素是分页链接来声明和分配页面以将其发送到 php。

我尝试添加 $(this).prop('checked', true); 但单击时未选中复选框(我不知道是什么阻止了它们):

$('body').on('click', '.click, :checkbox, .pag_link', function()
{
    // search, filters and change page buttons

    if ($('#res_prop').is(':checked')) {
        var use = $('#res_prop').val(); // 1
    }
    else if ($('#com_prop').is(':checked')) {
        var use = $('#com_prop').val(); // 0
    }
    else {
        $('p.error').show();
        die();
    }

    if ($(this).is(':checkbox')) {
        // not needed or it won't uncheck -> $(this).prop('checked', true);
        if ($(this).attr('class') == 'filter1' || $('.filter1').is(':checked')) {
            var type = $(this).val(); // maybe should be an array
        } else var type = null;
        if ($(this).attr('class') == 'filter2' || $('.filter2').is(':checked')) {
            var status = $(this).val(); // maybe should be an array
        } else var status = null;
        if ($(this).attr('class') == 'filter3' || $('.filter3').is(':checked')) {
            var bhk = $(this).val(); // maybe should be an array
        } else var bhk = null;
    }
    else {
        var type = status = bhk = null;
    }

    if ($(this).is('.pag_link')) {
        if ($(this).text() == '«')
            var page = (parseInt($('.active').text()) - 1);
        else if ($(this).text() == '»')
            var page = (parseInt($('.active').text()) + 1);
        else
            var page = parseInt($(this).text());
    }
    else {
        var page = 1;
    }

    $.ajax({
        method: 'POST',
        url: '/search',
        data: {
            'do': getUrlParameter('do'),
            'use': use,
            'type': type,
            'status': status,
            'bhk': bhk,
            'city': $('select[name="city"]').val(),
            'zone': $('select[name="zone"]').val(),
            'page': page
        }
    }).done(function(data) {
        if ($( '#search' ).is(':visible'))
            $( '#search' ).hide();

        if ($(this).is(':checkbox')) {
            var new_content = $(data).find( '#scroll-to-list' );
            $( '#scroll-to-list' ).replaceWith( new_content );
        }
        else {
            var new_content = $(data).find( '#search-filters, #scroll-to-list' );
            $( '#results' ).html( new_content );
        }

        $( 'html, body' ).animate({
            scrollTop: $( '#scroll-to-list' ).offset().top
        }, 1000);
    });

    //return false;
});

抱歉，我需要学习简化代码。

代码片段:

$('body').on('click', '.click, :checkbox, .pag_link', function() { // search, filters and change page buttons

  if ($('#res_prop').is(':checked')) {
    var use = $('#res_prop').val();
  } else if ($('#com_prop').is(':checked')) {
    var use = $('#com_prop').val();
  }

  if ($(this).is(':checkbox')) {
    //$(this).prop('checked', true); // still not checking them
    if ($(this).attr('class') == 'filter1' || $('.filter1').is(':checked')) {
      var type = $(this).val(); // maybe should be an array
    } else var type = null;
    if ($(this).attr('class') == 'filter2' || $('.filter2').is(':checked')) {
      var status = $(this).val(); // maybe should be an array
    } else var status = null;
    if ($(this).attr('class') == 'filter3' || $('.filter3').is(':checked')) {
      var bhk = $(this).val(); // maybe should be an array
    } else var bhk = null;
  } else {
    var type = status = bhk = null;
  }

  if ($(this).is('.pag_link')) {
    if ($(this).text() == '«')
      var page = (parseInt($('.active').text()) - 1);
    else if ($(this).text() == '»')
      var page = (parseInt($('.active').text()) + 1);
    else
      var page = parseInt($(this).text());
  } else {
    var page = 1;
  }

  $.ajax({
    method: 'POST',
    url: '/search',
    data: {
      'do': 'abc',
      'use': use,
      'type': type,
      'status': status,
      'bhk': bhk,
      'city': $('select[name="city"]').val(),
      'zone': $('select[name="zone"]').val(),
      'page': page
    }
  }).done(function(data) {
    if ($('#search').is(':visible'))
      $('#search').hide();

    if ($(this).is(':checkbox')) {
      var new_content = $(data).find('#scroll-to-list');
      $('#scroll-to-list').replaceWith(new_content);
    } else {
      var new_content = $(data).find('#search-filters, #scroll-to-list');
      $('#results').html(new_content);
    }

    $('html, body').animate({
      scrollTop: $('#scroll-to-list').offset().top
    }, 1000);
  });

  return false;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li>
    <input type="checkbox" id="brand" value="1">
    <label for="brand"><span></span><?php echo $lang->getW('prop_type_1'); ?></label>
  </li>
  <li>
    <input type="checkbox" id="brand1" value="2">
    <label for="brand1"><span></span><?php echo $lang->getW('prop_type_2'); ?></label>
  </li>
  <li>
    <input type="checkbox" id="brand2" value="3">
    <label for="brand2"><span></span><?php echo $lang->getW('prop_type_3'); ?></label>
  </li>
  <li>
    <input type="checkbox" id="brand3" value="4" />
    <label for="brand3"><span></span><?php echo $lang->getW('prop_type_4'); ?></label>
  </li>
  <li>
    <input type="checkbox" id="brand4" value="5">
    <label for="brand4"><span></span><?php echo $lang->getW('prop_type_5'); ?></label>
  </li>
  <li>
    <input type="checkbox" id="brand5" value="6">
    <label for="brand5"><span></span><?php echo $lang->getW('prop_type_6'); ?></label>
  </li>
</ul>

Answer 1

问题出在代码的 return false 语句上。由于您已将事件附加到父元素 (body)，因此 return false 语句将充当 event.preventDefault()。即，事件处理程序可防止默认行为，在您的情况下，它正在检查复选框。

工作片段:

$('body').on('click', '.click, :checkbox, .pag_link', function() { // search, filters and change page buttons

  if ($('#res_prop').is(':checked')) {
    var use = $('#res_prop').val();
  } else if ($('#com_prop').is(':checked')) {
    var use = $('#com_prop').val();
  }

  if ($(this).is(':checkbox')) {

    $(this).prop('checked', true); // still not checking them

    if ($(this).attr('class') == 'filter1' || $('.filter1').is(':checked')) {
      var type = $(this).val(); // maybe should be an array
    } else var type = null;
    if ($(this).attr('class') == 'filter2' || $('.filter2').is(':checked')) {
      var status = $(this).val(); // maybe should be an array
    } else var status = null;
    if ($(this).attr('class') == 'filter3' || $('.filter3').is(':checked')) {
      var bhk = $(this).val(); // maybe should be an array
    } else var bhk = null;
  } else {
    var type = status = bhk = null;
  }

  if ($(this).is('.pag_link')) {
    if ($(this).text() == '«') var page = (parseInt($('.active').text()) - 1);
    else if ($(this).text() == '»') var page = (parseInt($('.active').text()) + 1);
    else var page = parseInt($(this).text());
  } else {
    var page = 1;
  }

  $.ajax({
    method: 'POST',
    url: '/search',
    data: {
      'do': 'abc',
      'use': use,
      'type': type,
      'status': status,
      'bhk': bhk,
      'city': $('select[name="city"]').val(),
      'zone': $('select[name="zone"]').val(),
      'page': page
    }
  }).done(function(data) {
    if ($('#search').is(':visible')) $('#search').hide();

    if ($(this).is(':checkbox')) {
      var new_content = $(data).find('#scroll-to-list');
      $('#scroll-to-list').replaceWith(new_content);
    } else {
      var new_content = $(data).find('#search-filters, #scroll-to-list');
      $('#results').html(new_content);
    }

    $('html, body').animate({
      scrollTop: $('#scroll-to-list').offset().top
    }, 1000);
  });

  //  return false;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li>
    <input type="checkbox" id="brand" value="1">
    <label for="brand"><span></span>
            <?php echo $lang->getW('prop_type_1'); ?></label>
  </li>
  <li>
    <input type="checkbox" id="brand1" value="2">
    <label for="brand1"><span></span>
            <?php echo $lang->getW('prop_type_2'); ?></label>
  </li>
  <li>
    <input type="checkbox" id="brand2" value="3">
    <label for="brand2"><span></span>
            <?php echo $lang->getW('prop_type_3'); ?></label>
  </li>
  <li>
    <input type="checkbox" id="brand3" value="4" />
    <label for="brand3"><span></span>
            <?php echo $lang->getW('prop_type_4'); ?></label>
  </li>
  <li>
    <input type="checkbox" id="brand4" value="5">
    <label for="brand4"><span></span>
            <?php echo $lang->getW('prop_type_5'); ?></label>
  </li>
  <li>
    <input type="checkbox" id="brand5" value="6">
    <label for="brand5"><span></span>
            <?php echo $lang->getW('prop_type_6'); ?></label>
  </li>
</ul>