Binbo-Special - WEB制作や運営に関する楽屋話 -

サイト制作・運営やドラムの事やゲーム開発のこととか

技術資料

jqueryでテキストボックスやチェックボックスやラジオボタンとかの値・要素について取得する方法

jqueryは便利すぎて、本当に涙がちょちょぎれそうになるのですが、そうは言っても構文がたくさんあることに変わりなく、具体的な組み込みの際に書き方を忘れてしまう事もしばしば。

DOM関連の操作やフォーム関連の操作、値取得、値設定などなどで用いる事が多いかと思いますが、今回は割とよく使うけど構文をふとわすれてしまいがちな「値取得」周りについて、ある程度よく使われるであろうケースを前提にメモしておきたいと思います。

テキストボックスの値を取得

これはIDが指定されていれば基本中の基本の構文ですね。

HTML

あなたのお名前を一言一句不正確に入力してください<br />
<input type="text" id="onamae" name="onamae" value="" />

javascript

var value = $('#onamae').val();
if(!value){
    alert('お名前が入力されていません');
}else{
    alert('お名前欄に「'+value+'」と入力されています');
}

ただ、IDが指定されていないオブジェクトにアクセスしなければいけない場合もあるかと思います。そんなときは以下のようにnameの要素で指定出来るようにします。

HTML

あなたのお名前を一言一句不正確に入力してください<br />
<input type="text" name="onamae" value="" />

javascript

var value = $('input[name=onamae]').val();
if(!value){
    alert('お名前が入力されていません');
}else{
    alert('お名前欄に「'+value+'」と入力されています');
}

ラジオボタンの値を取得

よくある以下のようなHTMLのパターンで、nameだけが指定されている場合のラジオボタン。

テキストボックスの時のように、$(‘input[name=niku]’).val(); でいけるんじゃないのかな?と思いきやそうではなく、:checkedを付ける必要があります。

HTML

一番好きな肉は?<br />
<input type="radio" name="niku" value="牛肉" />牛肉<br />
<input type="radio" name="niku" value="豚肉" />豚肉<br />
<input type="radio" name="niku" value="鶏肉" />鶏肉

javascript

var value = $('input[name=niku]:checked').val();
if(!value){
    alert('一番好きな肉が選択されていません');
}else{
    alert('一番好きな肉は「'+value+'」が選択されています');
}

上記のパターンでのアクセスがほとんどだとは思いますが、たまにidによるアクセスをする時もあるかと思います。

そんな時は、propで判定。(jquery1.5以前はpropが無いのでattrで判別)

HTML

一番好きな枕は?<br />
<input type="radio" name="makura" id="makura1" value="抱き枕" />抱き枕<br />
<input type="radio" name="makura" id="makura2" value="枕詞" />枕詞<br />
<input type="radio" name="makura" id="makura3" value="枕営業" />枕営業

javascript

if($('#makura3').prop('checked')==true){
    alert('「枕営業」はチェックされています');
}else{
    alert('「枕営業」はチェックされていません');
}

チェックボックスの値を取得

チェックボックスの場合は、複数選択されることを前提としているので、チェックされている要素(:checked)をまとめて取得する必要があります。

HTML

<input type="checkbox" name="type" value="おっとり" />おっとり 
<input type="checkbox" name="type" value="しっとり" />しっとり 
<input type="checkbox" name="type" value="うっかり" />うっかり 
<input type="checkbox" name="type" value="ショートカット" />ショートカット 
<input type="checkbox" name="type" value="ポニーテール" />ポニーテール 
<input type="checkbox" name="type" value="ロングテール" />ロングテール 
<input type="checkbox" name="type" value="R" />R

javascript

var arr = [];
$('input[name=type]:checked').each(function(){
    arr.push($(this).val());
});
if(arr.length<=0){
    alert('好きなタイプが選択されていません');
}else{
    alert('好きなタイプは「'+arr.join('タイプ」「')+'タイプ」が選択されています');
}

セレクト要素(単一選択)の値を取得

プルダウンなどでよく使われるセレクト要素は、単一選択であればテキストボックスと同じように取得出来ます。

ただ、val()だとvalueの値が取れるだけなので、valueの値と表示の値が違う場合で表示の値も取得して用いたい場合は、option:selected要素に対してhtml()で取得します。

HTML

あなたの出身地を以下のリストから一番近い所を選択してください。<br />
<select name="area">
<option value="1">東京</option>
<option value="2">北海道</option>
<option value="3">アラスカ</option>
<option value="4">ロシア</option>
<option value="5">ノルウェー</option>
<option value="6">北半球</option>
</select>

javascript

var id = $('select[name=area]').val();
if(!id){
    alert('出身地が選択されていません');
}else{
    var value = $('select[name=area] option:selected').html();
    alert('出身地は「'+value+'」が選択されています。値は「'+id+'」です');
}

セレクト要素(複数選択)の値を取得

同じセレクト要素でも、複数選択式(multiple=”multiple”)のリストも存在します。

複数選択式の場合は、option:selectedで取得した値をeachで回せば良いです。

HTML

飼ったことのあるペットは?<br />
<select name="pet" size="5" multiple="multiple">
<option value="1">犬</option>
<option value="2">猫</option>
<option value="3">わんこ</option>
<option value="4">にゃんこ</option>
<option value="5">ザリガニ</option>
</select>

javascript

var pet = '';
$('select[name=pet] option:selected').each(function(){
    pet += '「'+$(this).html()+'(値:'+$(this).val()+')」';
});
if(pet==''){
    alert('飼ったことのあるペットが選択されていません');
}else{
    alert('飼ったことのあるペットは'+pet+'が選択されています');
}

基本的なパターンはこんなところでしょうか。

あとは煮るなり焼くなりその辺に転がすなり狭い所に押し込めるなりすり鉢に入れてゴリゴリするなり大きめな豆腐の中に埋め込むなりうちわでパタパタあおぐなり潰して平らにしてからフリスビーの要領で遠くまで投げるなり好きにしてください。

投稿日:

技術資料
,

関連記事

no image

東大王セカンドシーズンのクイズマラソンのランキングを計算してみた

クイズ番組、大好きなんですよね。

次回作っぽいもの情報。「とうふファンタジー(仮)」

次回作っぽいもの情報。「とうふファンタジー(仮)」

今度の主人公はとうふです!(主人公って言って良いのかどうか)

とうふファンタジー Android版を公開しました。

とうふファンタジー Android版を公開しました。

今回はついにとうふ達が主役になりました。
敵と戦い、勝利し、GOLDを得てとうふ達を強くしながら、新たな強い敵と戦っていく、、、
そんなゲームです。

no image

東大王セカンドシーズンの早書きバトルのランキングを計算してみた

クイズ番組、大好きなんですよね。

デモサイト(テストサイト・テスト環境)であることをわかりやすくしたい

デモサイト(テストサイト・テスト環境)であることをわかりやすくしたい

本番環境のサイトと、テスト環境・デモ環境・ステージング環境・開発環境等々、
サイト制作・公開・運用にあたって、様々な環境が存在します。