jQuery - 如何在click事件jquery中使用each()?

时间:2013-06-24 14:49:03

标签: javascript jquery dom

请参阅我的HTML代码:

<form action="#" class="check_opt" id="ckPrice">
    <p><input class="niceCheck" type="checkbox" name="" value="0-49">3 millions - 10 millions (21)</p>
    <p><input class="niceCheck" type="checkbox" name="" value="50-99"> >10 millions - 15 millions (7)</p>
    <p><input class="niceCheck" type="checkbox" name="" value="100">15 millions and above (15)</p>
</form>

和jQuery代码:

<script type="text/javascript"> 
    $(document).ready(function() { 
        $('#ckPrice :checkbox').click(function() { 
            var price = 'abc'; 
            $(".niceCheck").each(function() { 
                if ($(".niceCheck").is(":checked")) { 
                    price += $(".niceCheck").value(); 
                } 
            }); 
        alert(price); 
        }); 
     }); 
</script>

底层jQuery代码中的alert函数只返回'abc'。我该怎么做?

3 个答案:

答案 0 :(得分:5)

变化:

if ($(".niceCheck").is(":checked")) {
    price += $(".niceCheck").value();
}

为:

if ($(this).is(":checked")) {
    price += $(this).val();
}

您的.each()来电正在循环播放您想要的元素,您需要通过$(this)引用它们。此外,jQuery使用.val()而非.value()。当然,由于您有不寻常的值,您的最​​终结果将是一个字符串,其中包含“abc50-99100”

<强> jsFiddle example

答案 1 :(得分:1)

您正在检查第一个

 $(".niceCheck").each(function() { 
    var check = $(this);
    if (check.is(":checked")) { 
        price += check.val(); 
    } 
 });
 alert(price); 

答案 2 :(得分:1)

您的每项功能都应使用this

$(".niceCheck").each(function() { 
    if ($(this).is(":checked")) { 
        price += this.value;
    } 
});