0

我有一个表格，其中有一些复选框组。请找到以下代码。

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"  />
<title>Untitled Document</title>

<script type="text/javascript" src="jquery-1-4-2.js"></script>
<script type="text/javascript" src="jquery_validate.js"></script>
<script type="text/javascript" src="jquery.keyfilter-   1.7.js"></script>
<script type="text/javascript" >
$(document).ready(function (){
        $("#mainfruit").click(function(){
            if($('#mainfruit').is(':checked')){
                $('input[id^="fruit_"]').attr ( "checked" , false );                
                $('input[id^="fruit_"]').attr ( "disabled" , false );
            }else{
                $('input[id^="fruit_"]').attr ( "checked" , false );                
                $('input[id^="fruit_"]').attr ( "disabled" , true );                
            }
        });
        $("#idchecktest").validate({
            rules: {
                name: {
                    required: true
                      },
                fruit: {
                    subselect: true
                      }
                },
            messages: {
                foldername: {
                        required: "<br>Please enter the name."
                    },
                fruit: {
                        subselect:"<br>Please select sub checkbox."
                      }
              },
            //errorClass: 'errortext',
            errorLabelContainer: "#messagebox"
        });
    });
$.validator.addMethod('subselect', function (value) { 
    if($('#mainfruit').is(':checked')){
        /*var che=$('input[id^="fruit_"]');
        var i=0;
        che.each(function (i){
            if($(this).is(':checked')){
                i=1;
                return true;
                //break;
            }else{
                i=0;
                //continue;
            }
        });*/
        if($("'input[id^="fruit_"]':checked").length>0){
            return true;
        }else{
            return false;
        }
    }else{
        return true;
    }
}, 'check atleast one checkbox');
</script>
</head>
<body>
<form name="checktest" action="" id="idchecktest" method="get">
<table width="200" border="1">
  <tr>
    <td>Name</td>
    <td><input type="text" name="name" /></td>
  </tr>
  <tr>
    <td>Select Fruits </td>
    <td><p>
      <input type="checkbox" name="fruit" id="mainfruit" />
      Fruits<br />
         <input type="checkbox" name="mango" id="fruit_mango" disabled="disabled" />
        Mango <br />
        <input type="checkbox" name="pineapple" id="fruit_pineapple" disabled="disabled"/>
        Pineapple<br />
        <input type="checkbox" name="watermellon" id="fruit_watermellon" disabled="disabled"/>
        watermellon        <br />
        <input type="checkbox" name="orange" id="fruit_orange" disabled="disabled"/>
Orange</p>      </td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td><div id="messagebox"> </div></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td><label>
      <input type="submit" name="submit" id="submit" value="Submit" />
    </label></td>
  </tr>
</table>
</form>
</body>
</html>

在上面的代码中，我使用了 jquery 表单验证插件。现在我想为一组复选框添加一个自定义验证，即每当用户选中 Fruits 复选框时，他必须在其下选择至少一个复选框。如果他只选中水果复选框而不是它下面的复选框，那么应该会显示一条错误消息。

在上面的代码中，它显示了与复选框相关的错误消息，但是当我们取消选中 maincheckbox 即水果复选框时，相应的错误消息不会出现。1. 请朋友们告诉我我的 jquery 代码有什么问题。2.我也想知道是否可以为另一组复选框使用相同的自定义验证功能，如鲜花

请各位朋友指导一下。谢谢你！

4

0 回答 0