JavaScriptプログラムに関する各種メモ書き

javascriptで全てのチェックボックスにチェックをつける・外す

● javascriptで全てのチェックボックスにチェックを「つける」「外す」

・デモはこちら

https://pgmemo.tokyo/livedemo/all_checkbox_check/all_checkbox_check.html

javascript

function checkbox_all_check( _this, checkbox_name, form_name) {
	var check_flag = _this.checked;
	var form_dom;
	if ( form_name ){ form_dom = document[form_name]; }
	else{ form_dom = document.forms[0]; }

	if ( ! form_dom[checkbox_name] ){
		console.error( checkbox_name + ' という名前のチェックボックスが指定したフォーム内に存在しません' );
		return false;
	}

	for (var i = 0; i < form_dom[checkbox_name].length; i++) {
		form_dom[checkbox_name][i].checked = check_flag;
	}
}

html

<form name="FM" method="post">
		<label><input type="checkbox" id="data_all" onclick="checkbox_all_check(this, 'data_list[]','FM');">全てをチェック</label>
	<ul>
		<li><label><input type="checkbox" name="data_list[]" value="1"></label>データ1</li>
		<li><label><input type="checkbox" name="data_list[]" value="2"></label>データ2</li>
		<li><label><input type="checkbox" name="data_list[]" value="3"></label>データ3</li>
		<li><label><input type="checkbox" name="data_list[]" value="4"></label>データ4</li>
		<li><label><input type="checkbox" name="data_list[]" value="5"></label>データ5</li>
	</ul>
</form>

呼び出し方 1

checkbox_all_check(this, 'チェックボックスの name' ,);

例 :

checkbox_all_check(this, 'data_list[]');

呼び出し方 2 (フォームが複数ある場合)

checkbox_all_check(this, 'チェックボックスの name' ,'フォームのname' );

例 :

checkbox_all_check(this, 'data_list[]', 'FM');

関連エントリー

No.1285
08/07 10:36

edit

フォーム