web-dev-qa-db-ja.com

jqueryを使って入力タイプを取得する方法

入力タイプが常に変わるページがあり、入力タイプに応じて値を取得する必要があります。したがって、タイプがラジオの場合、どちらがチェックされているかを取得する必要があります。また、チェックボックスがチェックされている場合は、どちらがチェックされていますか。テキスト/テキストエリア値を知る必要があります。

それを行う方法について何かアイデアはありますか？

jqueryinputtypes
131
Luci

2013年2月1日編集。この回答の人気とプロパティおよび属性に関するバージョン1.9（および2.0）でのjQueryの変更のために、入力でプロパティ/属性にアクセスするときそれがどのように動作するかを見るための注意点とフィドルを追加しました。ボタンといくつかを選択します。ここにいじめる： http://jsfiddle.net/pVBU8/1/

すべての入力を取得する：

var allInputs = $(":input");

すべての入力タイプを取得する：

allInputs.attr('type');

値を取得します。

allInputs.val();

注意：.val（）は：と同じではありません。つかいます：

.attr("checked");

2013年2月1日編集 - 再：jQuery 1.9はattr（）ではなくprop（）を使用します。これはattrが変更されたプロパティに対して適切な値を返さないためです。

.prop('checked');

あるいは単に

$(this).checked;

チェックの値を取得するには - 現在のものは何でも。あるいはチェックされているものだけが欲しい場合は単に '：checked'を使用してください。

編集：これはタイプを取得する別の方法です：

var allCheckboxes=$('[type=checkbox]');

編集2：次の形式に注意してください。

$('input:radio');

見過ごされている

$(':radio');

どちらも以下と同じです。

$('input[type=radio]');

$(':radio')と同じ形式の$('*:radio');が使用されている場合は、入力のみが取得され、ユニバーサルな「*」は使用されません。

編集2015年8月19日：$('input[type=radio]');の設定を使用すると、最近のブラウザではラジオ入力の検索が最適化されます。

編集1コメントあたり2013年2月1日re：select elements @dariomac

$('select').prop("type");

"multiple"属性に応じて "select-one"または "select-multiple"を返します。

$('select')[0].type

最初のselectが存在する場合は、同じものを返します。そして

($('select')[0]?$('select')[0].type:"howdy")

存在する場合は型を返し、存在しない場合は "howdy"を返します。

 $('select').prop('type');

dOMの最初のプロパティが存在する場合はそのプロパティを返し、存在しない場合は "undefined"を返します。

$('select').type

存在する場合は最初のタイプを、存在しない場合はエラーを返します。

238
Mark Schultheiss

次のことができます。

var inputType = $('#inputid').attr('type');
14
xil3

あなたが言っていることがあなたが入力タイプを心配せずに値を持っているフォームの中のすべての入力を得たいということであるならば、これを試してください：

例：http://jsfiddle.net/nfLfa/

var $inputs = $('form').find(':checked,:selected,:text,textarea').filter(function() {
    return $.trim( this.value ) != '';
});

これで、何らかの値を持つ一連の入力要素ができました。

値を配列に入れることができます。

var array = $inputs.map(function(){
    return this.value;
}).get();

あるいは、それらを直列化することもできます。

var serialized = $inputs.serialize();
9
user113716
GetValue = function(id) {
  var tag = this.tagName;
  var type = this.attr("type");

  if (tag == "input" && (type == "checkbox" || type == "radio"))
    return this.is(":checked");

  return this.val();
};
7
Matthew Abbott

探し始めるのに最適な場所は http://api.jquery.com/category/selectors/ です。

これはあなたに良い例のセットを与えるでしょう。

DOM内の要素の選択はCSSセレクターを使用して達成されているので、idで要素を取得する場合は$（ '＃elementId'）を使用し、すべての入力タグに$（ 'input'）を使用する必要があります。そして最後に私はあなたがチェックボックスのタイプを持つすべての入力タグが欲しいならあなたが欲しいと思うだろうと思う部分$（ 'input、[type = checkbox]）

注：必要な値のほとんどは属性にあるため、属性のCSSセレクターは[attributeName = value]です。

リストボックスのようにドロップダウンを要求したからといって、次のことを試してください。


$('select, [size]).each(function(){
  var selectedItem = $('select, [select]', this).first();
});

コードはメモリからのものなので、小さなエラーを考慮してください

4
Robert
$("#yourobj").attr('type');
4
Ergec

Attr機能はさらに非推奨になりつつあるようです

$(this).attr('TYPE')
undefined
$(this).prop('type')
"text"
3
pat capozzi
var val = $('input:checkbox:checked, input:radio:checked, \
   select option:selected, textarea, input:text',
   $('#container')).val();

コメント：

  1. 私は、one form要素があると思います。それは、textarea、inputフィールド、select form、ラジオボタンのセット、または単一のチェックボックスのいずれかです（あなたが私のコードを更新しなければならないでしょう）より多くのチェックボックスが必要です。

  2. 問題の要素は、IDがcontainerの要素内にあります（ページ上の他の要素とのあいまいさを排除するため）。

  3. コードは最初の一致する要素の値を返します。私は:checkedなどを使っているので、これは常にあなたが探しているものの正確な値であるべきです。

3
Boldewyn

私のアプリケーションでは、私は同じID（bad）を持つ2つの異なる要素になってしまいました。一方の要素はdiv、もう一方の要素は入力でした。私は自分の入力を要約しようとしていて、重複したIDを実現するのにしばらく時間がかかりました。必要な要素の型を＃の前に置くことで、入力要素の値を取得してdivを破棄することができました。

$("input#_myelementid").val();

助けになれば幸いです。

0
Tibi