jQueryのセレクタ

jQueryのセレクタ
1. 関連

jQueryのセレクタ

jQueryのセレクタがいっぱいありすぎて覚えれないです。

セレクトボックスにname属性を使用してアクセスする場合$(‘select[name=hoge’)と言う感じでアクセスできます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>サンプル</title>
<script src="http://code.jquery.com/jquery.js"></script>
<!-- コーディング部分 -->
<script type="text/javascript">
function a(){
$("select[name=sel1").attr("disabled","disabled");
}
</script>
<!-- コーディング部分 -->
</head>
<body>
<form>
<div id="all">
<select name="sel1">
<option value="1">test1
<option value="2">test2
</select>
<br>
<select name="sel2">
<option value="1">test3
<option value="2">test4
</select>
</div>
<input type="button" value="ボタン" onclick="a();" /><br>
</form>
</body>
</html>

ボタンを押すとセレクトボックスが押せなくなります。DEMOです。

フォーム部品をdivタグで囲んでいるような場合、divタグのidをallとすると$(‘#all :input’)とするとdivタグ内の全てのinput部品を操作することができます。

以下ではdivタグ内のテキストボックスを全てdisabledにします。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>サンプル</title>
<script src="http://code.jquery.com/jquery.js"></script>
<!-- コーディング部分 -->
<script type="text/javascript">
function a(){
$("#all :input").attr("disabled","disabled");
}
</script>
<!-- コーディング部分 -->
</head>
<body>
<form>
<div id="all">
<input type="text" name="text1"><br>
<input type="text" name="text2"><br>
</div>
<input type="button" value="ボタン" onclick="a();" /><br>
</form>
</body>
</html>

DEMOです。

画面上の全てのセレクトボックスを選択するには$(‘select’)とします。

テキストボックスの場合は$(‘input[type=text]’)とします。これで画面上の全てのテキストボックスを操作できます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>サンプル</title>
<script src="http://code.jquery.com/jquery.js"></script>
<!-- コーディング部分 -->
<script type="text/javascript">
function a(){
$("input[type=text]").attr("disabled","disabled");
}
</script>
<!-- コーディング部分 -->
</head>
<body>
<form>
<div id="all">
<input type="text" name="text1"><br>
<input type="text" name="text2"><br>
</div>
<input type="button" value="ボタン" onclick="a();" /><br>
</form>
</body>
</html>

DEMOです。

ラジオボタンを操作する場合は$(‘input[type=radio]’)とします。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>サンプル</title>
<script src="http://code.jquery.com/jquery.js"></script>
<!-- コーディング部分 -->
<script type="text/javascript">
function a(){
$('input[type=radio]').attr("disabled","disabled");
}
</script>
<!-- コーディング部分 -->
</head>
<body>
<form>
<div id="all">
<input type="radio" name="aaa" value="test1">test1
<input type="radio" name="aaa" value="test2">test2
<input type="radio" name="aaa" value="test3">test3
</div>
<input type="button" value="ボタン" onclick="a();" /><br>
</form>
</body>
</html>

DEMOです。

チェックボックスを操作する場合は$(‘input[type=checkbox]’)とします。

$(‘input[type=checkbox]’).prop(“checked”,false);という感じです。

テキストエリアを操作する場合は$(‘textarea’)とします。

ファイル名と参照ボタンの操作をする場合は$(‘input[type=file]’)とします。