jQuery( ':file' )

jQuery API の jQuery( ':file' ) は、type 属性が file である要素を、すべて選択する。

記述方法

jQuery( ':file' )

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

記述例

jQuery( 'form :file' )

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

実装例(サンプル)

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

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

<input type=”checkbox” />

<input type=”file” />

<input type=”hidden” />

<input type=”image” />

<input type=”password” />

<input type=”radio” />

<input type=”reset” />

<input type=”submit” />

<input type=”text” />

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

<textarea></textarea>

<button>ボタン</button>

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

「toggle」ボタンをクリックすると、フォーム内の要素のうち、type 属性が file である要素の背景色が、ピンク色に変わる。さらに、「type 属性が file である要素の数:」の右横に「1個」と表示する。

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

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

JavaScript

<script type="text/javascript">
<!--
jQuery( function() {
    jQuery( '#jquery-api-toggle' ) . toggle(
        function () {
            jQuery( '#jquery-api-form :file' ) . css( {
                backgroundColor: 'pink',
            } );
            jQuery( '#jquery-api-message' ) . text(
                jQuery( '#jquery-api-form :file' ) . length + "個"
            );
        },
        function () {
            jQuery( '#jquery-api-form :file' ) . 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 {
    margin: 5px;
    background-color: yellow;
}
-->
</style>

HTML

<p>
    <button id="jquery-api-toggle">toggle</button>
    type 属性が file である要素の数:<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;input type="checkbox" /&#62;
        <input type="checkbox" />
    </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;input type="radio" /&#62;
        <input type="radio" />
    </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, セレクター, フォーム タグ: パーマリンク