我有很多价格复选框,而我试图做的是以下
当有人选择价格/复选框时,它会自动检查小于所选值的值。
HTML
<div class="prices">
<input type="checkbox" value="59.99" />59.99
<input type="checkbox" value="69.99" />69.99
<input type="checkbox" value="79.99" />79.99
<input type="checkbox" value="89.99" />89.99
<input type="checkbox" value="99.99" />99.99
<input type="checkbox" value="124.99" />124.99
<input type="checkbox" value="149.99" />149.99
<input type="checkbox" value="199.99" />199.99
<input type="checkbox" value="200.00" />200.00
</div>
JQUERY
$('.prices input[type=checkbox]').live('click', function (){
console.log(this);
$(this).attr('checked', true);
var chosenPrice = $(this).val();
console.log(chosenPrice);
$(".prices input").filter(function(){
return $(this).attr("value") <=chosenPrice}).attr('checked', true);
});
它会选择一些值,但它似乎不能正常工作。看看小提琴
答案 0 :(得分:2)
修改了部分代码..当选中当前复选框时,您只需要检查其他复选框。 还需要使用
将字符串转换为数字 parseFloat()
或Number()
$('.prices input[type=checkbox]').live('click', function() {
console.log(this);
var $this = $(this) ;
if ($this.is(':checked')) {
var chosenPrice = $this.val();
console.log(chosenPrice);
$(".prices input").filter(function() {
return parseFloat($(this).attr("value")) <= chosenPrice
}).prop('checked', true);
}
});
<强> Check Fiddle 强>
答案 1 :(得分:1)
答案 2 :(得分:0)
$(this).val()
返回一个字符串,而不是一个数字,所以你实际上并没有比较数字。
将您的值转换为浮点值,它应该有效:
$(document).on('click', '.prices input[type=checkbox]', function() {
var $this = $(this);
var value = parseFloat($this.val());
$this.siblings().andSelf().prop('checked', false).filter(function() {
return parseFloat($(this).val()) <= value;
}).prop('checked', true);
});
答案 3 :(得分:0)
代码的问题在于,完成的比较是以字符串而不是浮点数完成的。您可以使用以下代码解决此问题:
$('.prices input[type=checkbox]').live('click', function (){
var chosenPrice = $(this).val();
$(".prices input").filter(function(){
return parseFloat($(this).val()) <= parseFloat(chosenPrice)).attr('checked', true);
});
演示: JSFiddle