フォームのチェックボックスを配列でPOSTするときの全選択・全解除 | φ(..)メモとして残しておこう…

フォームのチェックボックスを配列でPOSTするときの全選択・全解除

<SCRIPT TYPE="text/javascript">

function check(targetForm,flag){
for(n=0;n<=targetForm.length-1;n++){
if(targetForm.elements[n].type == "checkbox"){
targetForm.elements[n].checked = flag;
}
}
}

</SCRIPT>


<form name="Form" method="post" action="#" id="Form1">

<label><input type="checkbox" name="name[]" value="データ1" ></input>データ1</label>
<label><input type="checkbox" name="name[]" value="データ2" ></input>データ2</label>
<label><input type="checkbox" name="name[]" value="データ3" ></input>データ3</label>
<input type="button" value="全選択" onClick="check(this.form,true)"/>
<input type="button" value="全解除" onClick="check(this.form,false)"/>


</form>


追記。。。
jQueryを使うやり方、c⌒っ゚д゚)っφ メモメモ...


----------------------JavaScript---------------------------------

<script type="text/javascript" src="jquery.js"></script>
<SCRIPT>
//すべてを選択
function checkAll(flg){
$field_set = $("input[id^='"+flg+"']")
$field_set.attr('checked', true);
$field_set.next().removeClass('checkbox_unchecked');
$field_set.next().addClass('checkbox_checked');
};


//すべてを解除
function removeAll(flg){
$target_set = $("input[id^='"+flg+"']")
$target_set.removeAttr('checked');
$("label[for*='"+flg+"']").removeClass('checkbox_checked');
$("label[for*='"+flg+"']").addClass('checkbox_unchecked');
};
</script>
----------------------JavaScript---------------------------------

----------------------HTML---------------------------------------

<form>

<input name="area[]" type="checkbox" value="*" id="chk1_1"/><label for="chk1_18">東京</label>
<input name="area[]" type="checkbox" value="*" id="chk1_2"/><label for="chk1_18">大阪</label>
<input name="area[]" type="checkbox" value="*" id="chk1_3"/><label for="chk1_18">沖縄</label>

<a href="javascript:void(0);" onclick="checkAll('chk1');">すべて選択</a>
<a href="javascript:void(0);" onclick="removeAll('chk1');">すべて解除</a>




<input name="area2[]" type="checkbox" value="*" id="chk2_1"/><label for="chk2_18">東京</label>
<input name="area2[]" type="checkbox" value="*" id="chk2_2"/><label for="chk2_18">大阪</label>
<input name="area2[]" type="checkbox" value="*" id="chk2_3"/><label for="chk2_18">沖縄</label>

<a href="javascript:void(0);" onclick="checkAll('chk2');">すべて選択</a>
<a href="javascript:void(0);" onclick="removeAll('chk2');">すべて解除</a>


</form>

----------------------HTML---------------------------------------