25個のチェックボックスのうち8個を正しい順序でクリックすると、ユーザーが自分のWebサイトの特定のセクションにアクセスできるページを作成しています。
まず最初に、元のコードを提供してくれたReigelに感謝します。彼は私が持っていたものを受け取り、それを書き直しました。これは、私が最初に始めたものよりもはるかに優れています。また、コードの最適化を手伝ってくれたPeterAjtaiにも感謝します。
私の質問は、出力をクリーンアップする方法、誰かが何かを悪用しないようにする方法、またはサーバーを台無しにするものを追加する方法です。必要ですか？
これがライブバージョンです：ライブ作業バージョンを表示するには、ここをクリックしてください
私のコードは次のとおりです。
<body onLoad="clearForms()" onUnload="clearForms()">
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<form id="form1" name="form1" method="post" action="check_combination.php">
<table width="200" border="1" align="center">
<tr>
<td width="20" align="center" valign="middle"><input name="checkbox" type="checkbox" value="1" /></td>
<td width="20" align="center" valign="middle"><input name="checkbox" type="checkbox" value="2"/></td>
<td width="20" align="center" valign="middle"><input name="checkbox" type="checkbox" value="3"/></td>
<td width="20" align="center" valign="middle"><input name="checkbox" type="checkbox" value="4"/></td>
<td width="20" align="center" valign="middle"><input name="checkbox" type="checkbox" value="5"/></td>
</tr>
<tr>
<td width="20" align="center" valign="middle"><input name="checkbox" type="checkbox" value="6"/></td>
<td width="20" align="center" valign="middle"><input name="checkbox" type="checkbox" value="7"/></td>
<td width="20" align="center" valign="middle"><input name="checkbox" type="checkbox" value="8"/></td>
<td width="20" align="center" valign="middle"><input name="checkbox" type="checkbox" value="9"/></td>
<td width="20" align="center" valign="middle"><input name="checkbox" type="checkbox" value="10"/></td>
</tr>
<tr>
<td width="20" align="center" valign="middle"><input name="checkbox" type="checkbox" value="11"/></td>
<td width="20" align="center" valign="middle"><input name="checkbox" type="checkbox" value="12"/></td>
<td width="20" align="center" valign="middle"><input name="checkbox" type="checkbox" value="13"/></td>
<td width="20" align="center" valign="middle"><input name="checkbox" type="checkbox" value="14"/></td>
<td width="20" align="center" valign="middle"><input name="checkbox" type="checkbox" value="15"/></td>
</tr>
<tr>
<td width="20" align="center" valign="middle"><input name="checkbox" type="checkbox" value="16"/></td>
<td width="20" align="center" valign="middle"><input name="checkbox" type="checkbox" value="17"/></td>
<td width="20" align="center" valign="middle"><input name="checkbox" type="checkbox" value="18"/></td>
<td width="20" align="center" valign="middle"><input name="checkbox" type="checkbox" value="19"/></td>
<td width="20" align="center" valign="middle"><input name="checkbox" type="checkbox" value="20"/></td>
</tr>
<tr>
<td width="20" align="center" valign="middle"><input name="checkbox" type="checkbox" value="21"/></td>
<td width="20" align="center" valign="middle"><input name="checkbox" type="checkbox" value="22"/></td>
<td width="20" align="center" valign="middle"><input name="checkbox" type="checkbox" value="23"/></td>
<td width="20" align="center" valign="middle"><input name="checkbox" type="checkbox" value="24"/></td>
<td width="20" align="center" valign="middle"><input name="checkbox" type="checkbox" value="25"/></td>
</tr>
<tr>
<td height="23" colspan="5" align="center" valign="middle" class="label"></td>
</tr>
<tr>
<td height="28" colspan="5" align="center" valign="middle"><input type="button" value="Test length" id="test" /></td>
</tr>
<tr>
<td height="28" colspan="5" align="center" valign="middle"><input type="submit" name="button" id="button" value="Submit" /></td>
</tr>
<tr>
<td height="28" colspan="5" align="center" valign="middle"><input type="button" name="button" id="button2" value="Test hidden input value" /></td>
</tr>
</table>
<input name="result" type="hidden" id="result" />
</form>
</body>
そしてjavascript：
function clearForms() {
var i;
for (i = 0; (i < document.forms.length); i++) {
document.forms[i].reset();
$(':checkbox[name=checkbox]:disabled').attr('disabled', false);
}
}
//initial checkCount of zero
var checkCount = 0;
//maximum number of allowed checked boxes
var maxChecks = 8;
$(document).ready(function() {
clearForms();
$("#form1").submit(function(e) {
if($("input:checkbox:checked").length < 8) {
alert("You must select at least 8 options before submitting!");
e.preventDefault();
}
});
var $nameCheckbox = $('input:checkbox[name=checkbox]');
$nameCheckbox.click(function() {
//update checkCount
checkCount = $('input:checked').length;
if (checkCount >= maxChecks) {
//alert('you may only choose up to ' + maxChecks + ' options');
$nameCheckbox.not(':checked').attr('disabled', true);
} else {
$nameCheckbox.filter(':disabled').attr('disabled', false);
}
if (this.checked) {
$("td.label").append('<label>' + this.value + ' </label>');
} else {
$("td.label").find(':contains(' + this.value + ')').remove();
}
$('input[name="result"]').val($("td.label").text());
});
$("#test").click(function() {
alert($('input:checked').length)
});
$('#button2').click(function() {
alert($('input[name="result"]').val());
});
});