Question

我有以下在jsfiddle中运行良好：http://jsfiddle.net/cRKPt/但在此处实现时：http://tinyurl.com/kyttpue（在wordpress页面[查看源代码以查看编码/ js]中），它不是工作......有什么想法？

HTML -

<form action="" id="myForm"  method="post">
<input type="checkbox" id="check0" name="check0" class="terms" />Drink ½ my body weight in ounces of water.
<input type="checkbox" id="check1" name="check1" class="terms1" />Change peanut butter
<input type="checkbox" id="check2" name="check2" class="terms2" />Change margarine
<input type="checkbox" id="check3" name="check3" class="terms3" />Start eating breakfast
<input type="checkbox" id="check4" name="check4" class="terms4" />Oatmeal on the run
<input type="checkbox" id="check5" name="check5" class="terms5" />Switch to almond milk
<input type="checkbox" id="check6" name="check6" class="terms6" />80/20 rule
<input type="checkbox" id="check7" name="check7" class="terms7" />No trans fats
<input type="checkbox" id="check8" name="check8" class="terms8" />Upgrade eggs to organic cage free
<input type="checkbox" id="check9" name="check9" class="terms9" />Whole wheat bread
<input type="checkbox" id="check10" name="check10" class="terms10" />Eat cheese only a couple times a week
<input type="checkbox" id="check11" name="check11" class="terms11" />Buy Garden of Eden Chips instead of Doritos
<input type="checkbox" id="check12" name="check12" class="terms12" />Don’t eat past 8PM
<input class="nxtbtn" type="submit" value="Continue ►" />
</form>

Javascript-- //

$(function () {
    jQuery.validator.addMethod("checkboxCheck", function(value, element,params) {
            return $(params[0]+':checked').length > 0;
    });
    $("#myForm").validate({

        rules: {
            check0:{
                checkboxCheck:['.terms'],
            },
            check1:{
                checkboxCheck:['.terms1'],
            },
            check2:{
                checkboxCheck:['.terms2'],
            },
            check3:{
                checkboxCheck:['.terms3'],
            },
            check4:{
                checkboxCheck:['.terms4'],
            },
            check5:{
                checkboxCheck:['.terms5'],
            },
            check6:{
                checkboxCheck:['.terms6'],
            },
            check7:{
                checkboxCheck:['.terms7'],
            },
            check8:{
                checkboxCheck:['.terms8'],
            },
            check9:{
                checkboxCheck:['.terms9'],
            },
            check10:{
                checkboxCheck:['.terms10'],
            },
            check11:{
                checkboxCheck:['.terms11'],
            },
            check12:{
                checkboxCheck:['.terms12'],
            },
        },
        messages: {
            check0:{
                checkboxCheck: "Check to Commit!",
            },
            check1:{
                checkboxCheck: "Check to Commit!",
            },
             check2:{
                checkboxCheck: "Check to Commit!",
            },
            check3:{
                checkboxCheck: "Check to Commit!",
            },
            check4:{
                checkboxCheck: "Check to Commit!",
            },
            check5:{
                checkboxCheck: "Check to Commit!",
            },
            check6:{
                checkboxCheck: "Check to Commit!",
            },
            check7:{
                checkboxCheck: "Check to Commit!",
            },
            check8:{
                checkboxCheck: "Check to Commit!",
            },
            check9:{
                checkboxCheck: "Check to Commit!",
            },
            check10:{
                checkboxCheck: "Check to Commit!",
            },
            check11:{
                checkboxCheck: "Check to Commit!",
            },
            check12:{
                checkboxCheck: "Check to Commit!",
            },
        },
        submitHandler: function(form) {
            // ajax goes here
            alert("valid form");
            return false;
        }
    });

});
//]]>  

</script>

此外，一旦他们检查了所有方框，我希望将它们转发到下一步/页面。

Answer 1

<form action="" id="myForm"  method="post" onSubmit="return check();">
    <input type="checkbox" id="check0" name="check0" class="terms" />Drink ½ my body weight in ounces of water.
    <input type="checkbox" id="check1" name="check1" class="terms1" />Change peanut butter
    <input type="checkbox" id="check2" name="check2" class="terms2" />Change margarine
    <input type="checkbox" id="check3" name="check3" class="terms3" />Start eating breakfast
    <input type="checkbox" id="check4" name="check4" class="terms4" />Oatmeal on the run
    <input type="checkbox" id="check5" name="check5" class="terms5" />Switch to almond milk
    <input type="checkbox" id="check6" name="check6" class="terms6" />80/20 rule
    <input type="checkbox" id="check7" name="check7" class="terms7" />No trans fats
    <input type="checkbox" id="check8" name="check8" class="terms8" />Upgrade eggs to organic cage free
    <input type="checkbox" id="check9" name="check9" class="terms9" />Whole wheat bread
    <input type="checkbox" id="check10" name="check10" class="terms10" />Eat cheese only a couple times a week
    <input type="checkbox" id="check11" name="check11" class="terms11" />Buy Garden of Eden Chips instead of Doritos
    <input type="checkbox" id="check12" name="check12" class="terms12" />Don’t eat past 8PM
    <input class="nxtbtn" type="submit" value="Continue ►" />
</form>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
function check(){
    var all_checked = true;
    $('#myForm input[type="checkbox"]').each(function(){
        if(!this.checked){
            all_checked = false;
        }
    });

    if(!all_checked){
        alert('Check to Commit!')
        return false;
    }
}
</script>

Answer 2

在WordPress中使用jQuery时，你不能只使用$（运算符（除非你将其包装）。

尝试：

jQuery('#myForm input[type="checkbox"]').each(function(){
    if(!this.checked){
        all_checked = false;
    }
});

验证是否在表单/ Wordpress中检查了所有复选框

2 个答案: