選択中のチェックボックスの背景色と枠線の色を変える

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>

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>

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>

スポンサード リンク

カテゴリー: API, JavaScript, jQuery, フォーム パーマリンク