jQuery を使い、選択中のチェックボックスの背景色と枠線の色を変える方法。チェックボックスにチェックを入れると、チェックボックスを包んでいるlabel要素の背景色と枠線の色を変更する。背景色と枠線の色を変えることで、どのチェックボックスが選択中であるか、わかりやすくすることができる。
実装例（サンプル）
実装例（サンプル）の動作について
チェックボックスにチェックを入れると、背景色をピンク色に、枠線の色を赤色にする。
チェックボックスからチェックを外すと、背景色を黄色に、枠線の色をグレーにする。
実装例（サンプル）のソースコード
JavaScript
<script type="text/javascript">
<!--
jQuery( function() {
jQuery( '#jquery-smaple-form input[name=jquery-smaple-checkbox]' ) . change(
function () {
jQuery( '#jquery-smaple-form input' ) . closest( 'label' ) . css( {
backgroundColor: 'yellow',
borderColor: 'gray',
} );
jQuery( '#jquery-smaple-form :checked' ) . closest( 'label' ) . css( {
backgroundColor: 'pink',
borderColor: 'red',
} );
}
) . change();
} );
// -->
</script>
<!--
jQuery( function() {
jQuery( '#jquery-smaple-form input[name=jquery-smaple-checkbox]' ) . change(
function () {
jQuery( '#jquery-smaple-form input' ) . closest( 'label' ) . css( {
backgroundColor: 'yellow',
borderColor: 'gray',
} );
jQuery( '#jquery-smaple-form :checked' ) . closest( 'label' ) . css( {
backgroundColor: 'pink',
borderColor: 'red',
} );
}
) . change();
} );
// -->
</script>
CSS
<style>
<!--
#jquery-smaple-form {
padding: 10px 5px;
}
#jquery-smaple-form input {
margin: 5px 5px 15px 5px;
cursor: pointer;
}
#jquery-smaple-form label {
margin: 5px;
padding: 5px 10px;
border: 1px solid gray;
border-radius: 10px;
background-color: yellow;
font-size: 15px;
color: #303030;
cursor: pointer;
}
-->
</style>
<!--
#jquery-smaple-form {
padding: 10px 5px;
}
#jquery-smaple-form input {
margin: 5px 5px 15px 5px;
cursor: pointer;
}
#jquery-smaple-form label {
margin: 5px;
padding: 5px 10px;
border: 1px solid gray;
border-radius: 10px;
background-color: yellow;
font-size: 15px;
color: #303030;
cursor: pointer;
}
-->
</style>
HTML
<form id="jquery-smaple-form">
<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>
</form>
<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>
</form>