jqueryを使用して入力タイプを取得するにはどうすればよいですか？

147

入力タイプが常に変化するページがあり、入力タイプに応じて値を取得する必要があります。タイプがラジオの場合は、どちらがチェックされているかを取得する必要があります。チェックボックスの場合は、チェックされているものが必要です。ドロップダウンの場合は、どちらが選択されているかを知る必要があります。値を知る必要があるテキスト/テキストエリア。

それを行う方法について何か考えはありますか？

jquery input types

— ルシ
ソース

2

みなさんはすべて入力IDに依存していますが、ラジオまたはチェックボックスの場合、同じIDを持っているはずですか？IDは一意でなければならないことを知っています。

— Luci

270

EDIT 2013年2月1日。この回答の人気と、プロパティと属性に関するバージョン1.9（および2.0）でのjQueryの変更により、いくつかのメモとフィドルを追加して、入力でプロパティ/属性にアクセスするときの動作を確認しました。ボタンといくつかの選択。ここでフィドル：http : //jsfiddle.net/pVBU8/1/

すべての入力を取得します。

var allInputs = $(":input");

すべての入力タイプを取得します。

allInputs.attr('type');

値を取得します。

allInputs.val();

注：.val（）は、関連するタイプの：checkedとは異なります。使用する：

.attr("checked");

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

.prop('checked');

または単に

$(this).checked;

チェックの値を取得する-それが現在何であれ。チェックするものだけが必要な場合は、単に '：checked'を使用します。

編集：タイプを取得する別の方法は次のとおりです：

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

EDIT2：次の形式に注意してください：

$('input:radio');

を超える

$(':radio');

どちらも次と同等です。

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

しかし、「入力」が望ましいので、入力のみを取得し、の形式$(':radio')が使用される場合にユニバーサル「*」を使用しません。$('*:radio');

2015年8月19日の編集：の設定を$('input[type=radio]');使用する必要があります。これにより、最新のブラウザーでラジオ入力の検索を最適化できるようになります。

EDIT 2013年2月1日、コメントごとにre：select elements @dariomac

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

「multiple」属性に応じて「select-one」または「select-multiple」を返し、

$('select')[0].type

存在する場合、最初の選択に対して同じ結果を返します。そして

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

存在する場合はタイプを返し、存在しない場合は「ハウディ」を返します。

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

DOMの最初のプロパティが存在する場合はそのプロパティを返し、ない場合は「未定義」を返します。

$('select').type

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

— マーク・シュルタイス
ソース

私はこれを試しました：var type = $（ "：input [name =" + name + "]"）。attr（ 'type'）; そしてそれはうまくいった！ありがとう。

— Luci

2

そして、「ドロップダウン」または選択入力についてはどうですか...？これは入力タグではないので...同じ問題が発生しましたが、domプロパティを使用するつもりです...

— dariomac

allInputs.attr('type');つまり、最初の要素の入力タイプのみを取得します。allInputs[0].attr('type');コレクションに複数の要素がある場合。同じことがallInputs.val();allInputs.each(function(){ var type = $(this).attr('type'); var val = $(this).val() });

— 言え

この日、フィドルが82のリビジョンで独自の生活を送っているLOL。jsfiddle.net/pVBU8/82

— マークシュルタイス

15

次のことができます。

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

— xil3
ソース

これは、各無線機に同じIDを与える必要があるということですか？

— Luci

6

@zeina- 要素に同じIDを付けないでください。

— user113716 2010

@ patrick- idは一意である必要があることを知っていますが、なぜidで入力タイプを取得するように提案しているのですか。また、ラジオと、名前に依存するチェックボックスがあるかもしれません。

— Luci

1

いいえ、同じIDを与えることはできません。これは無効です。：input jQueryセレクターを使用できます

— Mark Schultheiss

9

入力タイプを気にせずに値を持つフォーム内のすべての入力を取得したい場合は、次のようにしてください。

例： 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();

— user113716
ソース

7

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();
};

— マシュー・アボット
ソース

4

$("#yourobj").attr('type');

— エルジェック
ソース

4

探し始めるのに最適な場所は 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();
});

コードはメモリからのものだったので、小さなエラーに備えてください

— ロバート
ソース

ここでいう「[サイズ]」とは何ですか？

— ストレンジャー

@Udhayakumar '[size]'は結果をフィルタリングして、size属性を持つselect要素のみを含めるため、リストボックスのみが選択され、ドロップダウンは選択されません。

— ロバート

リストボックス->テキストボックスですか？

— Stranger

1

@Udhayakumar、いや、リストボックスではありません。このリンク[ jsfiddle.net/565961fj ]をたどって、ドロップダウンとリストボックスの違いを確認してください。

— ロバート

3

var val = $('input:checkbox:checked, input:radio:checked, \
   select option:selected, textarea, input:text',
   $('#container')).val();

コメント：

私は、textarea、入力フィールド、選択フォーム、ラジオボタンのセット、または単一のチェックボックスのいずれかであるフォーム要素が1つだけあると想定しています（チェックボックスがさらに必要な場合は、コードを更新する必要があります）。
問題の要素はIDを持つ要素内にありますcontainer（ページ上の他の要素とのあいまいさを取り除くため）。
次に、コードは、最初に一致した要素の値を返します。私が使っ:checkedているので、これは常にあなたが探しているものの正確な値であるべきです。

— ボルデウィン
ソース

3

attr機能はさらに非推奨になっているようです

$(this).attr('TYPE')
undefined
$(this).prop('type')
"text"

— パット・カポッツィ
ソース

0

私のアプリケーションでは、同じID（悪い）を持つ2つの異なる要素になってしまいました。1つの要素はdivで、もう1つは入力です。入力を合計しようとしていて、IDが重複していることに気付くまでに少し時間がかかりました。必要な要素のタイプを＃の前に配置することで、入力要素の値を取得してdivを破棄することができました。

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

お役に立てば幸いです。

— ティビ
ソース

0

<!DOCTYPE html>
<html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
          $(".show-pwd").click(function(){
          alert();
            var x = $("#myInput");
            if (x[0].type === "password") {
              x[0].type = "text";
            } else {
              x[0].type = "password";
            }
          });
        });
    </script>
</head>

<body>
    <p>Click the radio button to toggle between password visibility:</p>Password:
    <input type="password" value="FakePSW" id="myInput">
    <br>
    <br>
    <input type="checkbox" class="show-pwd">Show Password</body>

</html>

— アミット・ドウィヴェディ
ソース

0

  <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <script type="text/javascript" src="hs/jquery1.js"></script>
        <title>Document</title>
    </head>
    <body>
        <form>
            <input type="text" class="tamil">
            <input type="button" class="english">
        </form>
        <script>
            $("input").addClass(function(index){
                    console.log($(this).attr('type'));
            })
        </script>
    </body>
    </html>

ライトフォームタイプを取得します

— サントッシュクマー
ソース