Làm cách nào để lấy kiểu nhập bằng jquery?

Question

Tôi có một trang nơi loại đầu vào luôn thay đổi và tôi cần nhận 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 có được kiểm tra, và nếu nó là một hộp kiểm tôi cần bây giờ được kiểm tra, và nếu nó là một thả xuống tôi cần phải biết được chọn, và nếu nó là một văn bản/textarea Tôi cần phải biết các giá trị.

Bất kỳ ý tưởng nào về cách thực hiện điều đó?

Answer 1

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

---

nhận được tất cả các yếu tố đầu:

var allInputs = $(":input"); 

nhận được tất cả các yếu tố đầu loại:

allInputs.attr('type'); 

được các giá trị:

allInputs.val(); 

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

.attr("checked"); 

---

EDIT 01 tháng 2 2013 - tái: jQuery 1.9 sử dụng prop() không attr() như attr sẽ không trở lại các giá trị thích hợp đối với tài sản đó đã thay đổi.

.prop('checked'); 

hoặc đơn giản là

$(this).checked; 

---

để có được giá trị của việc kiểm tra - bất cứ điều gì nó hiện là. hoặc chỉ đơn giản là sử dụng ': checked' 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 các hình thức:

$('input:radio'); 

được perferred qua

$(':radio'); 

mà cả hai tương đương đến:

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

nhưng "đầu vào" là mong muốn vì vậy nó chỉ được đầu vào và không sử dụng phổ biến '*" khi biểu mẫu của $(':radio') được sử dụng tương đương với $('*:radio');

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

---

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

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

sẽ trở lại hoặc "chọn-one" hoặc "chọn-nhiều" phụ thuộc vào thuộc tính "nhiều" và

$('select')[0].type 

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

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

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

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

trả về thuộc tính đầ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ề loại đầu tiên nếu tồn tại hoặc lỗi nếu không tồn tại.

Answer 2

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

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

Answer 3

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

Answer 4

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

Answer 5

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

này sẽ cung cấp cho bạn một bộ tốt của các ví dụ. Ultamatly lựa chọn các phần tử trong DOM là đạt được bằng cách sử dụng bộ chọn CSS vì vậy nếu bạn nghĩ về việc nhận được 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 $ ('đầu vào') và cuối cùng 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 giá trị bạn muốn là trên các thuộc tính để chọn css cho các thuộc tính là: [AttributeName = value]

Chỉ vì bạn yêu cầu thả xuống như aposed đến một ListBox 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 accound cho các lỗi nhỏ

Answer 6

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

Bình luận:

1. tôi giả định, rằng có chính xác là một yếu tố hình thức, mà có thể là một textarea, lĩnh vực đầu vào, chọn hình thức, một tập hợp các nút radio hay một đơn 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ử được đề cập nằm trong phần tử có mã số container (để loại bỏ sự mơ hồ với các thành phần khác trên trang).

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

Answer 7

Nếu bạn đang muốn nói là bạn muốn để có được tất cả các đầu vào bên trong một hình thức có giá trị mà không cần lo lắng về các loại đầu vào, hãy thử 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ể serialize họ:

var serialized = $inputs.serialize(); 

Answer 8

Dường như các chức năng attr là nhận thêm phản

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

Answer 9

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 một id (xấu). Một phần tử là một div và một phần tử khác là một đầu vào. Tôi đã cố gắng để tổng hợp đầu vào của tôi và đã cho tôi một thời gian để nhận ra các id trùng lặp. Bằng cách đặt các loại yếu tố tôi muốn trướC#, tôi đã có thể lấy giá trị của các yếu tố đầu vào và loại bỏ các div:

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

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