jQuery API の jQuery( ':file' ) は、type 属性が file である要素を、すべて選択する。
記述方法
jQuery( ':file' )
type 属性が file である要素を、すべて選択する。
記述例
jQuery( 'form :file' )
form 要素内の要素で、type 属性が file である要素を、すべて選択する。
実装例（サンプル）
type 属性が file である要素の数：
実装例（サンプル）の動作について
「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>
<!--
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>
<!--
#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>
<input type="button" value="インプットボタン" />
<input type="button" value="インプットボタン" />
</p>
<p>
<input type="checkbox" />
<input type="checkbox" />
</p>
<p>
<input type="file" />
<input type="file" />
</p>
<p>
<input type="hidden" />
<input type="hidden" />
</p>
<p>
<input type="image" />
<input type="image" />
</p>
<p>
<input type="password" />
<input type="password" />
</p>
<p>
<input type="radio" />
<input type="radio" />
</p>
<p>
<input type="reset" />
<input type="reset" />
</p>
<p>
<input type="submit" />
<input type="submit" />
</p>
<p>
<input type="text" />
<input type="text" />
</p>
<p>
<select>
<option>オプション</option>
<option>オプション</option>
</select>
<select>
<option>オプション</option>
<option>オプション</option>
</select>
</p>
<p>
<textarea></textarea>
<textarea></textarea>
</p>
<p>
<button>ボタン</button>
<button>ボタン</button>
</p>
</form>
<button id="jquery-api-toggle">toggle</button>
type 属性が file である要素の数：<span id="jquery-api-message"></span>
</p>
<form id="jquery-api-form">
<p>
<input type="button" value="インプットボタン" />
<input type="button" value="インプットボタン" />
</p>
<p>
<input type="checkbox" />
<input type="checkbox" />
</p>
<p>
<input type="file" />
<input type="file" />
</p>
<p>
<input type="hidden" />
<input type="hidden" />
</p>
<p>
<input type="image" />
<input type="image" />
</p>
<p>
<input type="password" />
<input type="password" />
</p>
<p>
<input type="radio" />
<input type="radio" />
</p>
<p>
<input type="reset" />
<input type="reset" />
</p>
<p>
<input type="submit" />
<input type="submit" />
</p>
<p>
<input type="text" />
<input type="text" />
</p>
<p>
<select>
<option>オプション</option>
<option>オプション</option>
</select>
<select>
<option>オプション</option>
<option>オプション</option>
</select>
</p>
<p>
<textarea></textarea>
<textarea></textarea>
</p>
<p>
<button>ボタン</button>
<button>ボタン</button>
</p>
</form>