Làm thế nào để có được loại đầu vào bằng cách sử dụng jquery?

Tôi có một trang trong đó loại đầu vào luôn thay đổi và tôi cần lấy các giá trị tùy thuộc vào loại đầu vào. Vì vậy, nếu loại đó là một đài phát thanh, tôi cần phải chọn loại nào được chọn và nếu đó là hộp kiểm tôi cần phải chọn, và nếu đó là loại thả xuống, tôi cần biết cái nào được chọn, và nếu nó là một văn bản / textarea tôi cần biết các giá trị.

Bất kỳ ý tưởng về làm thế nào để làm điều đó?

EDIT ngày 1 tháng 2 năm 2013. Do mức độ phổ biến của câu trả lời này và những thay đổi đối với jQuery trong phiên bản 1.9 (và 2.0) liên quan đến các thuộc tính và thuộc tính, tôi đã thêm một số ghi chú và một câu đố để xem cách nó hoạt động khi truy cập các thuộc tính / thuộc tính trên đầu vào, nút và một số lựa chọn. Câu đố ở đây: http://jsfiddle.net/pVBU8/1/

nhận được tất cả các đầu vào:

var allInputs = $(":input");

lấy tất cả các loại đầu vào:

allInputs.attr('type');

lấy các giá trị:

allInputs.val();

LƯU Ý: .val () KHÔNG giống như: được kiểm tra cho những loại có liên quan. sử dụng:

.attr("checked");

EDIT ngày 1 tháng 2 năm 2013 - re: jQuery 1.9 sử dụng prop () không attr () vì attr sẽ không trả về giá trị phù hợp cho các thuộc tính đã thay đổi.

.prop('checked');

hoặc đơn giản

$(this).checked;

để có được giá trị của séc - bất kể hiện tại là gì. hoặc chỉ cần sử dụng ': đã kiểm tra' nếu bạn chỉ muốn những người được chọn.

EDIT: Đây là một cách khác để có được loại:

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

EDIT2: Lưu ý rằng hình thức:

$('input:radio');

được quan tâm

$(':radio');

mà cả hai tương đương với:

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

nhưng "đầu vào" là mong muốn nên nó chỉ nhận được đầu vào và không sử dụng phổ quát '* "khi hình thức $(':radio')được sử dụng tương đương với$('*:radio');

EDIT ngày 19 tháng 8 năm 2015: ưu tiên cho việc $('input[type=radio]');này nên được sử dụng vì điều đó cho phép các trình duyệt hiện đại tối ưu hóa việc tìm kiếm đầu vào radio.

EDIT ngày 1 tháng 2 năm 2013 trên mỗi bình luận lại: chọn các yếu tố @dariomac

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

sẽ trả về "select-one" hoặc "select-many" tùy thuộc vào thuộc tính "multi" và

$('select')[0].type 

trả về tương tự cho lựa chọn đầu tiên nếu nó tồn tại. và

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

sẽ trả về kiểu nếu nó tồn tại hoặc "howdy" nếu không.

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

trả về thuộc tính của cái đầu tiên trong DOM nếu nó tồn tại hoặc "không xác định" nếu không tồn tại.

$('select').type

trả về kiểu của cái đầu tiên nếu nó tồn tại hoặc có lỗi nếu không tồn tại.

Bạn có thể làm như sau:

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

Nếu điều bạn đang nói là bạn muốn nhận tất cả các đầu vào bên trong một biểu mẫu có giá trị mà không phải lo lắng về loại đầu vào, hãy thử điều này:

Ví dụ: http://jsfiddle.net/nfLfa/

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

Bây giờ bạn nên có một tập hợp các yếu tố đầu vào có một số giá trị.

Bạn có thể đặt các giá trị trong một mảng:

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

Hoặc bạn có thể tuần tự hóa chúng:

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

Nơi tốt nhất để bắt đầu tìm kiếm là http://api.jquery.com/carget/selector/

Điều này sẽ cung cấp cho bạn một tập hợp các ví dụ tốt.

Cuối cùng, việc lựa chọn các phần tử trong DOM được thực hiện bằng cách sử dụng các bộ chọn CSS, vì vậy nếu bạn nghĩ về việc lấy một phần tử theo id, bạn sẽ muốn sử dụng $ ('# ElementId'), nếu bạn muốn tất cả các thẻ đầu vào sử dụng $ ('input') và hoàn thiện phần tôi nghĩ bạn sẽ muốn nếu bạn muốn tất cả các thẻ đầu vào có loại hộp kiểm sử dụng $ ('đầu vào, [loại = hộp kiểm])

Lưu ý: Bạn sẽ tìm thấy hầu hết các giá trị bạn muốn có trên các thuộc tính, vì vậy, bộ chọn css cho các thuộc tính là: [propertyName = value]

Chỉ vì bạn đã yêu cầu thả xuống khi được gửi đến hộp danh sách, hãy thử như sau:

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

Mã này là từ bộ nhớ, vì vậy hãy xử lý các lỗi nhỏ

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

Bình luận:

1. Tôi giả sử rằng có chính xác một yếu tố biểu mẫu, có thể là textarea, trường nhập, chọn biểu mẫu, một tập hợp các nút radio hoặc một hộp kiểm (bạn sẽ phải cập nhật mã của tôi nếu bạn cần thêm hộp kiểm).

2. Phần tử trong câu hỏi nằm bên trong một phần tử có ID container(để loại bỏ sự mơ hồ với các phần tử khác trên trang).

3. Mã sau đó sẽ trả về giá trị của phần tử phù hợp đầu tiên mà nó tìm thấy. Vì tôi sử dụng :checkedvà vân vân, nên nó luôn luôn chính xác là giá trị của những gì bạn đang tìm kiếm.

Có vẻ như chức năng attr ngày càng bị phản đối

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

Trong ứng dụng của tôi, tôi đã kết thúc với hai yếu tố khác nhau có cùng id (xấu). Một yếu tố là div và đầu vào còn lại. Tôi đã cố gắng tổng hợp các đầu vào của mình và mất một lúc để nhận ra các id trùng lặp. Bằng cách đặt loại phần tử tôi muốn trước #, tôi có thể lấy giá trị của phần tử đầu vào và loại bỏ div:

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

Tôi hy vọng nó sẽ giúp.

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

tôi nhận được loại hình thức