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

$(this).is(':checkbox') prevents checking

本文关键字:检查 checkbox this is      更新时间:2023-09-26

我有一个绑定到三个元素的点击函数,第一个只是触发它检查两个单选按钮并用检查的值声明一个变量,第二个是复选框并用这些值声明变量,第三个元素是分页链接,用于声明和分配页面以将其发送到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>

问题出在代码的return false语句上。由于您已将事件附加到父元素(body),return false语句将充当event.prventDefault()。即,事件处理程序阻止默认行为,在您的情况下,它是选中复选框。

工作片段:

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

使用此代码,您可以检查是否选中复选框:

<script>
    if($("input#yourId").attr("checked" , true)) {
        //Doing some functions
    }
</script>

我认为为了更好地工作,您应该在代码中删除return false