jQuery( ':checkbox' )

jQuery API の jQuery( ':checkbox' ) は、type 属性が checkbox であるすべての要素(チェックボックス)を選択する。

記述方法

jQuery( ':checkbox' )

type 属性が checkbox であるすべての要素を選択する。

記述例

jQuery( 'form :checkbox' )

form 要素内の要素で、type 属性が checkbox である、すべての要素を選択する。

実装例(サンプル)

type 属性が checkbox である要素の数:

<input type=”button” value=”インプットボタン” />

<label> <input type=”checkbox” /> チェックボックス </label>

<input type=”file” />

<input type=”hidden” />

<input type=”image” />

<input type=”password” />

<label> <input type=”radio” /> ラジオボタン </label>

<input type=”reset” />

<input type=”submit” />

<input type=”text” />

<select> <option>オプション</option> <option>オプション</option> </select>

<textarea></textarea>

<button>ボタン</button>

実装例(サンプル)の動作について

「toggle」ボタンをクリックすると、フォーム内のチェックボックス要素を囲むラベル要素の背景色が、ピンク色に変わる。さらに、「type 属性が checkbox である要素の数:」の右横に「1個」と表示する。

「toggle」ボタンを再度クリックすると、フォーム内のチェックボックス要素を囲むラベル要素の背景色が、黄色に戻る。さらに、「type 属性が checkbox である要素の数:」の右横の「1個」を非表示にする。

実装例(サンプル)のソースコード

JavaScript

<script type="text/javascript">
<!--
jQuery( function() {
    jQuery( '#jquery-api-toggle' ) . toggle(
        function () {
            jQuery( '#jquery-api-form :checkbox' ) . closest( 'label' ) . css( {
                backgroundColor: 'pink',
            } );
            jQuery( '#jquery-api-message' ) . text(
                jQuery( '#jquery-api-form :checkbox' ) . length + "個"
            );
        },
        function () {
            jQuery( '#jquery-api-form :checkbox' ) . closest( 'label' ) . css( {
                backgroundColor: 'yellow',
            } );
            jQuery( '#jquery-api-message' ) . text( "" );
        }
    );
    jQuery( 'form#jquery-api-form' ) . submit( function () { return false; } );
} );
// -->
</script>

CSS

<style>
<!--
#jquery-api-form {
    margin: 5px;
    padding: 5px;
    border: 1px solid gray;
    border-radius: 10px;
}
#jquery-api-form input,
#jquery-api-form select,
#jquery-api-form textarea,
#jquery-api-form button,
#jquery-api-form label {
    margin: 5px;
    background-color: yellow;
}
#jquery-api-form label {
    font-size: 15px;
    color: #303030;
}
-->
</style>

HTML

<p>
    <button id="jquery-api-toggle">toggle</button>
    type 属性が checkbox である要素の数:<span id="jquery-api-message"></span>
</p>
<form id="jquery-api-form">
    <p>
        &#60;input type="button" value="インプットボタン" /&#62;
        <input type="button" value="インプットボタン" />
    </p>
    <p>
        &#60;label&#62;
            &#60;input type="checkbox" /&#62;
            チェックボックス
        &#60;/label&#62;
        <label>
            <input type="checkbox" />
            チェックボックス
        </label>
    </p>
    <p>
        &#60;input type="file" /&#62;
        <input type="file" />
    </p>
    <p>
        &#60;input type="hidden" /&#62;
        <input type="hidden" />
    </p>
    <p>
        &#60;input type="image" /&#62;
        <input type="image" />
    </p>
    <p>
        &#60;input type="password" /&#62;
        <input type="password" />
    </p>
    <p>
        &#60;label&#62;
            &#60;input type="radio" /&#62;
            ラジオボタン
        &#60;/label&#62;
        <label>
            <input type="radio" />
            ラジオボタン
        </label>
    </p>
    <p>
        &#60;input type="reset" /&#62;
        <input type="reset" />
    </p>
    <p>
        &#60;input type="submit" /&#62;
        <input type="submit" />
    </p>
    <p>
        &#60;input type="text" /&#62;
        <input type="text" />
    </p>
    <p>
        &#60;select&#62;
            &#60;option&#62;オプション&#60;/option&#62;
            &#60;option&#62;オプション&#60;/option&#62;
        &#60;/select&#62;
        <select>
            <option>オプション</option>
            <option>オプション</option>
        </select>
    </p>
    <p>
        &#60;textarea&#62;&#60;/textarea&#62;
        <textarea></textarea>
    </p>
    <p>
        &#60;button&#62;ボタン&#60;/button&#62;
        <button>ボタン</button>
    </p>
</form>

スポンサード リンク

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