Input系jQueryのまとめ select,textarea,textの内容取得やチェックボックスの変更不可等
この記事は年前に書かれました。不適当な記述を含む場合がありますので、参考程度に留めてください。
どうもこんばんは!
ちょっと個人的に地味に忘れちゃうINPUT系のマトメを書いておきます。
ざっとまとめると…
・select – 内容取得
・select – value取得
・text – 内容取得
・textarea – 内容取得
・checkbox – 変更不可方法
・checkbox – デフォルトでチェック済みに指定する方法
こんな内容です。
時と場合によってとても便利だったりするので
もし良ければお気に入りしていただければ幸いです。
selectの内容取得
select.1
・HTML
<p id="ex1">select.1</p>
<select id="pull_ex1">
<option>optoin.1</option>
<option>optoin.2</option>
<option>optoin.3</option>
</select>
・JS
$("#pull_ex1").change(function(){
var str1 = $(‘#pull_ex1 option:selected’).text();
$(‘#ex1’).html(str1);
});
selectのvalue取得
select.2
・HTML
<p id="ex2">select.2</p>
<select id="pull_ex2">
<option value="value.1">optoin.1</option>
<option value="value.2">optoin.2</option>
<option value="value.3">optoin.3</option>
</select>
・JS
$("#pull_ex2").change(function(){
var str2 = $(‘#pull_ex2 option:selected’).val();
$(‘#ex2’).html(str2);
});
textの内容取得
input.1
・HTML
<p id="ex3">input.1</p>
<input id="input_ex1" type="text">
・JS
$("#input_ex1").change(function(){
var str3 = $(‘#input_ex1’).val();
$(‘#ex3’).html(str3);
});
textareaの内容取得
textarea.1
・HTML
<p id="ex4">textarea.1</p>
<textarea id="textarea_ex1">AAA</textarea>
・JS
$("#textarea_ex1").change(function(){
var str4 = $(‘#textarea_ex1’).val();
$(‘#ex4’).html(str4);
});
checkboxの変更不可
disabled
・HTML
<p id="ex5">disabled</p>
<input id="checkbox_ex1" type="checkbox">
・JS
$("#checkbox_ex1").attr({‘disabled’:’disabled’});
checkboxのチェック状態
cheked
・HTML
<p id="ex6">cheked</p>
<input id="checkbox_ex2" type="checkbox">
・JS
$("#checkbox_ex2").attr({‘checked’:’checked’});