最終更新日:2014年12月27日 作成日:2008年6月26日 | コメント(0)

複数のチェックボックスにチェックする入力支援javascript

フォームでチェックボックスを作成することは多々あります。
1つをクリックすると、複数のチェックボックスにチェックする入力支援のサンプルを公開します。
あると便利で、簡単に作成できるので是非ご利用ください。

手軽に導入する(ソースにjavascriptを記入する方法)

あなたの好きな季節は何月ですか?(複数回答)

春にチェックする 夏にチェックする 秋にチェックする 冬にチェックする
全てにチェックする
チェックを解除する
サンプルソースコード

<form name="form1">
<p>あなたの好きな季節は何月ですか?(複数回答)</p>
<a href="javascript:;" onClick="document.form1.ch3.checked = true;document.form1.ch4.checked = true;document.form1.ch5.checked = true;" />春にチェックする</a>
<a href="javascript:;" onClick="document.form1.ch6.checked = true;document.form1.ch7.checked = true;document.form1.ch8.checked = true;" />夏にチェックする</a>
<a href="javascript:;" onClick="document.form1.ch9.checked = true;document.form1.ch10.checked = true;document.form1.ch11.checked = true;" />秋にチェックする</a>
<a href="javascript:;" onClick="document.form1.ch12.checked = true;document.form1.ch1.checked = true;document.form1.ch2.checked = true;" />冬にチェックする</a><br />
<a href="javascript:;" onClick="document.form1.ch1.checked = true;document.form1.ch2.checked = true;document.form1.ch3.checked = true;document.form1.ch4.checked = true;document.form1.ch5.checked = true;document.form1.ch6.checked = true;document.form1.ch7.checked = true;document.form1.ch8.checked = true;document.form1.ch9.checked = true;document.form1.ch10.checked = true;document.form1.ch11.checked = true;document.form1.ch12.checked = true;" />全てにチェックする</a><br />
<a href="javascript:;" onClick="document.form1.ch1.checked = false;document.form1.ch2.checked = false;document.form1.ch3.checked = false;document.form1.ch4.checked = false;document.form1.ch5.checked = false;document.form1.ch6.checked = false;document.form1.ch7.checked = false;document.form1.ch8.checked = false;document.form1.ch9.checked = false;document.form1.ch10.checked = false;document.form1.ch11.checked = false;document.form1.ch12.checked = false;" />チェックを解除する</a><br />
<input type="checkbox" name="ch1" id="ch1" /><label for="ch1">1月</label>
<input type="checkbox" name="ch2" id="ch2" /><label for="ch2">2月</label>
<input type="checkbox" name="ch3" id="ch3" /><label for="ch3">3月</label>
<input type="checkbox" name="ch4" id="ch4" /><label for="ch4">4月</label>
<input type="checkbox" name="ch5" id="ch5" /><label for="ch5">5月</label>
<input type="checkbox" name="ch6" id="ch6" /><label for="ch6">6月</label>
<input type="checkbox" name="ch7" id="ch7" /><label for="ch7">7月</label>
<input type="checkbox" name="ch8" id="ch8" /><label for="ch8">8月</label>
<input type="checkbox" name="ch9" id="ch9" /><label for="ch9">9月</label>
<input type="checkbox" name="ch10" id="ch10" /><label for="ch10">10月</label>
<input type="checkbox" name="ch11" id="ch11" /><label for="ch11">11月</label>
<input type="checkbox" name="ch12" id="ch12" /><label for="ch12">12月</label>
</form>

この記事が参考になったらSNSにお願いします。

コメントする


web制作に関係のある記事一覧

Copyright ぞえぞえねっと All rights reserved