フォームがあり、チェックボックスのグループがいくつかあります。以下のコードを見つけてください。
<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> </td>
<td><div id="messagebox"> </div></td>
</tr>
<tr>
<td> </td>
<td><label>
<input type="submit" name="submit" id="submit" value="Submit" />
</label></td>
</tr>
</table>
</form>
</body>
</html>
上記のコードでは、jqueryフォーム検証プラグインを使用しました。次に、チェックボックスのグループにカスタム検証を追加します。つまり、ユーザーが[フルーツ]チェックボックスをオンにするたびに、その下にある少なくとも1つのチェックボックスを選択する必要があります。彼が果物のチェックボックスのみをチェックし、その下のチェックボックスをチェックしない場合、エラーメッセージが表示されます。
上記のコードでは、チェックボックスに関連するエラーメッセージが表示されますが、メインチェックボックス、つまりフルーツチェックボックスのチェックを外しても、それぞれのエラーメッセージは表示されません。1.jqueryコードの何が問題になっているのかを友達に教えてください。2.また、Flowersなどのチェックボックスの別のグループに同じカスタム検証機能を使用できることも知りたいです。
この友達に案内してください。ありがとう！