Input系jQueryのまとめ select,textarea,textの内容取得やチェックボックスの変更不可等

この記事は5年前に書かれました。不適当な記述を含む場合がありますので、参考程度に留めてください。

どうもこんばんは!
ちょっと個人的に地味に忘れちゃう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’});

DEMO