jQuery API の jQuery( ':checked' ) は、チェックされている要素を、すべて選択する。
記述方法
jQuery( ':checked' )
チェックされている要素を、すべて選択する。
記述例
jQuery( 'form :checked' )
form 要素内の要素で、チェックされている要素を、すべて選択する。
実装例（サンプル）
チェックされている要素の数：
実装例（サンプル）の動作について
「チェックボックス」もしくは「ラジオボタン」をクリックしチェックを入れると、フォーム内の要素のうち、チェックされている要素の背景色が、ピンク色に、チェックされていない要素の背景色が、黄色になる。さらに、「チェックされている要素の数：」の右横に「n個」のように、チェックを入れた要素の個数を表示する。
実装例（サンプル）のソースコード
JavaScript
<script type="text/javascript">
<!--
jQuery( function() {
jQuery( '#jquery-smaple-form input[name^=jquery-smaple-]' ) . change(
function () {
jQuery( '#jquery-smaple-form input' ) . closest( 'label' ) . css( {
backgroundColor: 'yellow',
} );
jQuery( '#jquery-smaple-form :checked' ) . closest( 'label' ) . css( {
backgroundColor: 'pink',
} );
jQuery( '#jquery-smaple-message' ) . text(
jQuery( '#jquery-smaple-form :checked' ) . length + "個"
);
}
) . change();
} );
// -->
</script>
<!--
jQuery( function() {
jQuery( '#jquery-smaple-form input[name^=jquery-smaple-]' ) . change(
function () {
jQuery( '#jquery-smaple-form input' ) . closest( 'label' ) . css( {
backgroundColor: 'yellow',
} );
jQuery( '#jquery-smaple-form :checked' ) . closest( 'label' ) . css( {
backgroundColor: 'pink',
} );
jQuery( '#jquery-smaple-message' ) . text(
jQuery( '#jquery-smaple-form :checked' ) . length + "個"
);
}
) . change();
} );
// -->
</script>
CSS
<style>
<!--
#jquery-smaple-form {
margin: 5px;
padding: 5px;
border: 1px solid gray;
border-radius: 10px;
}
#jquery-smaple-form input {
margin: 5px 5px 15px 5px;
}
#jquery-smaple-form label {
margin: 5px;
background-color: yellow;
font-size: 15px;
color: #303030;
}
-->
</style>
<!--
#jquery-smaple-form {
margin: 5px;
padding: 5px;
border: 1px solid gray;
border-radius: 10px;
}
#jquery-smaple-form input {
margin: 5px 5px 15px 5px;
}
#jquery-smaple-form label {
margin: 5px;
background-color: yellow;
font-size: 15px;
color: #303030;
}
-->
</style>
HTML
<p>
チェックされている要素の数：<span id="jquery-smaple-message"></span>
</p>
<form id="jquery-smaple-form">
<p>
<label>
<input type="checkbox" />
チェックボックス
</label>
</p>
<p>
<label>
<input type="checkbox" name="jquery-smaple-checkbox" checked="checked" />
チェックボックス1
</label>
<label>
<input type="checkbox" name="jquery-smaple-checkbox" />
チェックボックス2
</label>
<label>
<input type="checkbox" name="jquery-smaple-checkbox" />
チェックボックス3
</label>
</p>
<p>
<label>
<input type="radio" />
ラジオボタン
</label>
</p>
<p>
<label>
<input type="radio" name="jquery-smaple-radio" checked="checked" />
ラジオボタン1
</label>
<label>
<input type="radio" name="jquery-smaple-radio" />
ラジオボタン2
</label>
<label>
<input type="radio" name="jquery-smaple-radio" />
ラジオボタン3
</label>
</p>
</form>
チェックされている要素の数：<span id="jquery-smaple-message"></span>
</p>
<form id="jquery-smaple-form">
<p>
<label>
<input type="checkbox" />
チェックボックス
</label>
</p>
<p>
<label>
<input type="checkbox" name="jquery-smaple-checkbox" checked="checked" />
チェックボックス1
</label>
<label>
<input type="checkbox" name="jquery-smaple-checkbox" />
チェックボックス2
</label>
<label>
<input type="checkbox" name="jquery-smaple-checkbox" />
チェックボックス3
</label>
</p>
<p>
<label>
<input type="radio" />
ラジオボタン
</label>
</p>
<p>
<label>
<input type="radio" name="jquery-smaple-radio" checked="checked" />
ラジオボタン1
</label>
<label>
<input type="radio" name="jquery-smaple-radio" />
ラジオボタン2
</label>
<label>
<input type="radio" name="jquery-smaple-radio" />
ラジオボタン3
</label>
</p>
</form>