複数のチェックボックス使ったフォームにおいて、クリック操作で、チェックボックスを、すべて選択、すべて解除、すべて反転できるようにする方法。jQuery を使うと簡単だ。
実装例（サンプル）
実装例（サンプル）の動作について
「すべて：」の右横の「選択」をクリックすると、すべての項目のチェックボックスにチェックを入れる。
「すべて：」の右横の「解除」をクリックすると、すべての項目のチェックボックスのチェックを外す。
「すべて：」の右横の「反転」をクリックすると、すべての項目のチェックボックスのチェックを反転する。チェックが入っているものはチェックを外し、チェックが入っていないものはチェックを入れる。
実装例（サンプル）のソースコード
読み込み
<script type="text/javascript" src="jquery-1.6.2.js"></script>
「jQuery」を読み込む。
JavaScript
<script type="text/javascript">
<!--
jQuery( function() {
jQuery( '#jquery-smaple-a-1' ) . click( function() {
jQuery( '#jquery-smaple-form input[type=checkbox]' ) . prop( 'checked', true );
} );
jQuery( '#jquery-smaple-a-2' ) . click( function() {
jQuery( '#jquery-smaple-form input[type=checkbox]' ) . prop( 'checked', false );
} );
jQuery( '#jquery-smaple-a-3' ) . click( function() {
jQuery( '#jquery-smaple-form input[type=checkbox]' ) . prop( 'checked', function( index, oldValue ){
return !oldValue;
} );
} );
} );
// -->
</script>
<!--
jQuery( function() {
jQuery( '#jquery-smaple-a-1' ) . click( function() {
jQuery( '#jquery-smaple-form input[type=checkbox]' ) . prop( 'checked', true );
} );
jQuery( '#jquery-smaple-a-2' ) . click( function() {
jQuery( '#jquery-smaple-form input[type=checkbox]' ) . prop( 'checked', false );
} );
jQuery( '#jquery-smaple-a-3' ) . click( function() {
jQuery( '#jquery-smaple-form input[type=checkbox]' ) . prop( 'checked', function( index, oldValue ){
return !oldValue;
} );
} );
} );
// -->
</script>
使用しているjQuery api
- click( fn )
- jQuery( '[attribute!=”value”]' )
- jQuery( '#id' )
- prop( propertyName, function( [index][, oldValue] ) )
- prop( propertyName, value )
CSS
<style>
<!--
#jquery-smaple-form p {
margin: 5px;
}
#jquery-smaple-form input {
margin: 0;
}
#jquery-smaple-form a {
color: blue;
cursor: pointer;
}
#jquery-smaple-form a:hover {
color: red;
}
#jquery-smaple-form label {
margin: 5px 10px;
padding: 2px 5px;
border: 1px solid gray;
border-radius: 5px;
background-color: yellow;
font-size: 15px;
color: #303030;
cursor: pointer;
}
-->
</style>
<!--
#jquery-smaple-form p {
margin: 5px;
}
#jquery-smaple-form input {
margin: 0;
}
#jquery-smaple-form a {
color: blue;
cursor: pointer;
}
#jquery-smaple-form a:hover {
color: red;
}
#jquery-smaple-form label {
margin: 5px 10px;
padding: 2px 5px;
border: 1px solid gray;
border-radius: 5px;
background-color: yellow;
font-size: 15px;
color: #303030;
cursor: pointer;
}
-->
</style>
HTML
<form id="jquery-smaple-form">
<p>すべて：
<a id="jquery-smaple-a-1">選択</a>｜
<a id="jquery-smaple-a-2">解除</a>｜
<a id="jquery-smaple-a-3">反転</a>
</p>
<p>
<label>
<input type="checkbox" /> 項目１
</label>
<label>
<input type="checkbox" /> 項目２
</label>
<label>
<input type="checkbox" /> 項目３
</label>
<label>
<input type="checkbox" /> 項目４
</label>
<label>
<input type="checkbox" /> 項目５
</label>
</p>
</form>
<p>すべて：
<a id="jquery-smaple-a-1">選択</a>｜
<a id="jquery-smaple-a-2">解除</a>｜
<a id="jquery-smaple-a-3">反転</a>
</p>
<p>
<label>
<input type="checkbox" /> 項目１
</label>
<label>
<input type="checkbox" /> 項目２
</label>
<label>
<input type="checkbox" /> 項目３
</label>
<label>
<input type="checkbox" /> 項目４
</label>
<label>
<input type="checkbox" /> 項目５
</label>
</p>
</form>