Bagaimana cara mendapatkan tipe input menggunakan jquery?

Saya memiliki halaman di mana tipe input selalu bervariasi, dan saya perlu mendapatkan nilai tergantung pada tipe input. Jadi, jika jenisnya adalah radio, saya harus mendapatkan yang dicentang, dan jika itu adalah kotak centang, saya perlu sekarang yang dicentang, dan jika itu adalah drop-down saya perlu tahu mana yang dipilih, dan saya jika itu adalah a text / textarea Saya perlu tahu nilainya.

Adakah yang tahu bagaimana melakukannya?

EDIT 1 Feb 2013. Karena popularitas jawaban ini dan perubahan jQuery di versi 1.9 (dan 2.0) mengenai properti dan atribut, saya menambahkan beberapa catatan dan biola untuk melihat cara kerjanya saat mengakses properti / atribut pada input, tombol dan beberapa pilihan. Biola di sini: http://jsfiddle.net/pVBU8/1/

dapatkan semua input:

var allInputs = $(":input");

dapatkan semua jenis input:

allInputs.attr('type');

dapatkan nilainya:

allInputs.val();

CATATAN: .val () BUKAN sama dengan: diperiksa untuk jenis-jenis di mana yang relevan. menggunakan:

.attr("checked");

EDIT 1 Feb 2013 - re: jQuery 1.9 menggunakan prop () bukan attr () karena attr tidak akan mengembalikan nilai yang tepat untuk properti yang telah berubah.

.prop('checked');

atau sederhana

$(this).checked;

untuk mendapatkan nilai cek - apa pun itu saat ini. atau cukup gunakan tanda ': dicentang' jika Anda hanya menginginkan yang dicentang.

EDIT: Ini cara lain untuk mendapatkan tipe:

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

EDIT2: Perhatikan bahwa bentuk:

$('input:radio');

ditangguhkan

$(':radio');

yang keduanya sama dengan:

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

tetapi "input" diinginkan sehingga hanya mendapat input dan tidak menggunakan universal '* "ketika bentuk $(':radio')yang digunakan sama dengan$('*:radio');

EDIT 19 Ags 2015: preferensi untuk $('input[type=radio]');harus digunakan seperti itu kemudian memungkinkan browser modern untuk mengoptimalkan pencarian input radio.

EDIT 1 Feb 2013 per komentar kembali: pilih elemen @dariomac

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

akan mengembalikan "select-one" atau "select-multiple" tergantung pada atribut "multiple" dan

$('select')[0].type 

mengembalikan yang sama untuk pemilihan pertama jika ada. dan

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

akan mengembalikan jenisnya jika ada atau "melolong" jika tidak.

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

mengembalikan properti yang pertama di DOM jika ada atau "tidak terdefinisi" jika tidak ada.

$('select').type

mengembalikan tipe yang pertama jika ada atau kesalahan jika tidak ada.

Anda dapat melakukan hal berikut:

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

Jika yang Anda katakan adalah bahwa Anda ingin mendapatkan semua input di dalam formulir yang memiliki nilai tanpa khawatir tentang tipe input, coba ini:

Contoh: http://jsfiddle.net/nfLfa/

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

Sekarang Anda harus memiliki satu set elemen input yang memiliki beberapa nilai.

Anda bisa meletakkan nilai dalam array:

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

Atau Anda bisa membuat cerita bersambung:

var serialized = $inputs.serialize();

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

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

Tempat terbaik untuk mulai mencari adalah http://api.jquery.com/category/selectors/

Ini akan memberi Anda satu set contoh yang baik.

Pada dasarnya pemilihan elemen dalam DOM dilakukan dengan menggunakan penyeleksi CSS jadi jika Anda berpikir untuk mendapatkan elemen dengan id Anda akan ingin menggunakan $ ('# elementId'), jika Anda ingin semua tag input gunakan $ ('input') dan akhirnya bagian yang saya pikir Anda akan inginkan jika Anda ingin semua tag input dengan jenis kotak centang gunakan $ ('input, [type = checkbox])

Catatan: Anda akan menemukan sebagian besar nilai yang Anda inginkan ada pada atribut sehingga pemilih css untuk atribut adalah: [attributeName = value]

Hanya karena Anda meminta dropdown sebagaimana diaplikasikan ke listbox, coba yang berikut ini:

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

Kode berasal dari memori, jadi silakan mencari kesalahan kecil

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

Komentar:

1. Saya berasumsi, bahwa ada tepat satu elemen bentuk, yang dapat berupa textarea, kolom input, form pilih, satu set tombol radio atau satu kotak centang (Anda harus memperbarui kode saya jika Anda memerlukan lebih banyak kotak centang).

2. Elemen yang dimaksud tinggal di dalam elemen dengan ID container(untuk menghapus ambiguitas dengan elemen lain di halaman).

3. Kode kemudian akan mengembalikan nilai elemen pencocokan pertama yang ditemukannya. Karena saya menggunakan :checkeddan seterusnya, ini harus selalu menjadi nilai tepat dari apa yang Anda cari.

Tampaknya fungsi attr semakin ditinggalkan

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

Dalam aplikasi saya, saya berakhir dengan dua elemen berbeda yang memiliki id yang sama (buruk). Satu elemen adalah div dan yang lainnya merupakan input. Saya mencoba untuk meringkas input saya dan butuh beberapa saat untuk mewujudkan id duplikat. Dengan menempatkan jenis elemen yang saya inginkan di depan #, saya dapat mengambil nilai elemen input dan membuang div:

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

Saya harap ini membantu.

<!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>

  <!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>

saya mendapatkan tipe wright form