jQuery API の jQuery( ':input' ) は、input 要素、textarea 要素、select 要素、button 要素を、すべて選択する。
記述方法
jQuery( ':input' )
input 要素、textarea 要素、select 要素、button 要素を、すべて選択する。
記述例
jQuery( 'form :input' )
form 要素内の、input 要素、textarea 要素、select 要素、button 要素を、すべて選択する。
実装例（サンプル）
input 要素、textarea 要素、select 要素、button 要素の数：
実装例（サンプル）の動作について
「toggle」ボタンをクリックすると、フォーム内の各フォーム部品要素の背景色が、ピンク色に変わる。さらに、「input 要素、textarea 要素、select 要素、button 要素の数：」の右横に「13個」と表示する。
「toggle」ボタンを再度クリックすると、フォーム内の各フォーム部品要素の背景色が、黄色に戻る。さらに、「input 要素、textarea 要素、select 要素、button 要素の数：」の右横の「13個」を非表示にする。
実装例（サンプル）のソースコード
JavaScript
<script type="text/javascript">
<!--
jQuery( function() {
jQuery( '#jquery-api-toggle' ) . toggle(
function () {
jQuery( '#jquery-api-input :input' ) . css( {
backgroundColor: 'pink',
} );
jQuery( '#jquery-api-message' ) . text(
jQuery( '#jquery-api-input :input' ) . length + "個"
);
},
function () {
jQuery( '#jquery-api-input :input' ) . css( {
backgroundColor: 'yellow',
} );
jQuery( '#jquery-api-message' ) . text( "" );
}
);
jQuery( 'form#jquery-api-input' ) . submit( function () { return false; } );
} );
// -->
</script>
<!--
jQuery( function() {
jQuery( '#jquery-api-toggle' ) . toggle(
function () {
jQuery( '#jquery-api-input :input' ) . css( {
backgroundColor: 'pink',
} );
jQuery( '#jquery-api-message' ) . text(
jQuery( '#jquery-api-input :input' ) . length + "個"
);
},
function () {
jQuery( '#jquery-api-input :input' ) . css( {
backgroundColor: 'yellow',
} );
jQuery( '#jquery-api-message' ) . text( "" );
}
);
jQuery( 'form#jquery-api-input' ) . submit( function () { return false; } );
} );
// -->
</script>
CSS
<style>
<!--
#jquery-api-input {
margin: 5px;
padding: 5px;
border: 1px solid gray;
border-radius: 10px;
}
#jquery-api-input input,
#jquery-api-input select,
#jquery-api-input textarea,
#jquery-api-input button {
margin: 5px;
background-color: yellow;
}
-->
</style>
<!--
#jquery-api-input {
margin: 5px;
padding: 5px;
border: 1px solid gray;
border-radius: 10px;
}
#jquery-api-input input,
#jquery-api-input select,
#jquery-api-input textarea,
#jquery-api-input button {
margin: 5px;
background-color: yellow;
}
-->
</style>
HTML
<p>
<button id="jquery-api-toggle">toggle</button>
input 要素、textarea 要素、select 要素、button 要素の数：<span id="jquery-api-message"></span>
</p>
<form id="jquery-api-input">
<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>
input 要素、textarea 要素、select 要素、button 要素の数：<span id="jquery-api-message"></span>
</p>
<form id="jquery-api-input">
<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>