$(this).is(':checkbox')阻止检查
$(this).is(':checkbox') prevents checking
我有一个绑定到三个元素的点击函数,第一个只是触发它检查两个单选按钮并用检查的值声明一个变量,第二个是复选框并用这些值声明变量,第三个元素是分页链接,用于声明和分配页面以将其发送到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
。
相关文章:
- 为什么不't Javascript对我的输入值进行了一些重新检查
- 在单击任何位置时隐藏元素,而不检查每次DOM单击
- 如何检查管道中未定义的项目
- 主干-不管怎样,检查事件以前是否绑定过
- 使用javascript检查多个输入值,并在1次检查中标记多个输入框
- 递归使用 eval() 是检查程序执行的好方法吗?
- 检查onsubmit doenst work jquery contactform上的函数
- JavaScript 检查隐藏字段中的值并将其设置为隐藏字段值
- API密钥使用和检查示例
- 如何让程序检查所选单词中是否有按键
- JS:检查URL中的参数,然后迭代一个参数为var的函数
- 用于检查数组中是否存在元素的javascript自定义方法
- 检查是否在带有Javascript的GridView的一行中选中了asp Checkbox
- JS checkbox.checked与手动检查
- $(this).is(':checkbox')阻止检查
- 使用jQuery检查checkbox checked属性是否为空
- 如何使用jtree和checkbox/html_data插件自动检查复选框
- 在jQuery事件处理程序中检查输入[type=checkbox]
- 启用/禁用基于CheckBox的asp:TextBox控件.检查为真或假
- Javascript在输入框被选中时检查复选框- checkbox array[]