フォームのチェックボックスを配列で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---------------------------------------
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---------------------------------------