JQuery kullanarak giriş türü nasıl alınır?

Giriş türünün her zaman değiştiği bir sayfam var ve giriş türüne bağlı olarak değerleri almam gerekiyor. Eğer tür bir radyo ise, hangisinin kontrol edildiğini almam gerekiyor ve eğer bir onay kutusu ise şimdi hangisinin kontrol edildiğini ve bir açılır liste varsa hangisinin seçildiğini bilmeliyim ve eğer bir metin / textarea Değerleri bilmem gerekiyor.

Bunun nasıl yapılacağı hakkında bir fikrin var mı?

EDIT 1 Şub 2013. Bu yanıtın popülaritesi ve özellikler ve niteliklerle ilgili 1.9 (ve 2.0) sürümünde jQuery'deki değişiklikler nedeniyle, bazı özellikler ekledim ve girdilerdeki özelliklere / niteliklere erişirken nasıl çalıştığını görmek için bir keman ekledim, düğmeleri ve bazı seçimler. Buradaki keman: http://jsfiddle.net/pVBU8/1/

tüm girdileri alın:

var allInputs = $(":input");

tüm giriş türlerini alın:

allInputs.attr('type');

değerleri alın:

allInputs.val();

NOT: .val (), aşağıdakiyle aynı DEĞİLDİR: ilgili olduğu yerler için kontrol edilir. kullanın:

.attr("checked");

EDIT 1 Şub 2013 - re: jQuery 1.9 attr değiştirilmiş özellikleri için attr () değil prop () kullanmayın.

.prop('checked');

ya da sadece

$(this).checked;

Çekin değerini almak için - şu anda ne olursa olsun. ya da yalnızca: işaretli olanlar istiyorsanız ': işaretli' kullanın.

EDIT: İşte tür almak için başka bir yol:

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

DÜZENLEME2:

$('input:radio');

üzerinden değerlendirildi

$(':radio');

her ikisi de:

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

ancak "giriş" istenir, böylece yalnızca girişleri alır ve $(':radio')aşağıdakine denk gelen "*" biçimini kullanmaz.$('*:radio');

EDIT 19 Ağu 2015: $('input[type=radio]');modern tarayıcıların radyo girişi aramasını optimize etmesine olanak tanıdığı için tercih edilmelidir.

EDIT 1 Şub 2013 yorum başına yeniden: select elements @dariomac

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

"çoklu" özelliğine bağlı olarak "select-one" veya "select-multiple" değerlerini döndürür ve

$('select')[0].type 

varsa, ilk seçim için aynısını döndürür. ve

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

varsa türü veya yoksa "howdy" i döndürür.

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

varsa DOM'da ilkinin özelliğini veya yoksa "tanımsız" değerini döndürür.

$('select').type

varsa ilk türün türünü, yoksa varsa hata döndürür.

Aşağıdakileri yapabilirsiniz:

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

Söylediğiniz şey, girdi türü hakkında endişelenmeden bir değeri olan bir formun içindeki tüm girdileri almak istiyorsanız, şunu deneyin:

Örnek: http://jsfiddle.net/nfLfa/

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

Şimdi bazı değerlere sahip bir dizi girdi öğeniz olmalıdır.

Değerleri bir diziye koyabilirsiniz:

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

Veya bunları serileştirebilirsiniz:

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');

Bakmaya başlamak için en iyi yer http://api.jquery.com/category/selectors/

Bu size iyi bir dizi örnek verecektir.

Son olarak DOM'daki öğelerin seçimi CSS seçicileri kullanılarak elde edilir, bu nedenle bir öğeyi kimliğe göre almayı düşünüyorsanız $ ('# elementId') kullanmak istersiniz, tüm giriş etiketlerinin $ ('input') kullanmasını istiyorsanız ve son olarak, onay kutusu türüne sahip tüm giriş etiketlerinin $ ('input, [type = checkbox]) kullanmasını istediğinizi düşündüğüm kısmı sonlandırın

Not: İstediğiniz değerlerin çoğunun özniteliklerde olduğunu görürsünüz, bu nedenle öznitelikler için css seçici: [attributeName = value]

Bir liste kutusuna gösterildiği gibi açılır listeyi istediyseniz, aşağıdakileri deneyin:

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

Kod bellekten geliyordu, bu yüzden lütfen küçük hatalardan sorumlu olun

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

Yorumlar:

1. Bir metin alanı, giriş alanı, seçim formu, radyo düğmeleri kümesi veya tek bir onay kutusu olabilen tam olarak bir form öğesi olduğunu varsayalım (daha fazla onay kutusuna ihtiyacınız varsa kodumu güncellemeniz gerekecek).

2. Söz konusu öğe, kimliğine sahip bir öğenin içinde yaşıyor container(sayfadaki diğer öğelerle ilgili belirsizlikleri kaldırmak için).

3. Kod daha sonra bulduğu ilk eşleşen öğenin değerini döndürür . Kullandığım :checkedve benzeri olduğundan, bu her zaman tam olarak aradığınız şeyin değeri olmalıdır.

Attr işlevselliği daha fazla kullanımdan kaldırılıyor gibi görünüyor

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

Uygulamamda aynı kimliğe sahip iki farklı öğe buldum (kötü). Bir öğe bir div, diğeri bir girdiydi. Girişlerimi özetlemeye çalışıyordum ve yinelenen kimlikleri fark etmem biraz zaman aldı. İstediğim öğenin türünü # önüne yerleştirerek, girdi öğesinin değerini alıp div değerini atabildim:

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

Umut ediyorum bu yardım eder.

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

daha çok form türü alıyorum