วิธีรับประเภทอินพุตโดยใช้ jquery

ฉันมีเพจที่ประเภทอินพุตแตกต่างกันเสมอและฉันต้องได้รับค่าขึ้นอยู่กับประเภทอินพุต ดังนั้นถ้าประเภทเป็นวิทยุฉันต้องได้รับการตรวจสอบและถ้ามันเป็นช่องทำเครื่องหมายฉันต้องตอนนี้ซึ่งมีการตรวจสอบและถ้ามันเป็นแบบเลื่อนลงฉันต้องรู้ว่ามีการเลือกและถ้ามันเป็น ข้อความ / textarea ฉันต้องรู้ค่า

ความคิดเกี่ยวกับวิธีการทำเช่นนั้น?

แก้ไข 1 ก.พ. 2013 เนื่องจากความนิยมของคำตอบนี้และการเปลี่ยนแปลงของ jQuery ในเวอร์ชั่น 1.9 (และ 2.0) เกี่ยวกับคุณสมบัติและคุณสมบัติฉันจึงเพิ่มบันทึกและซอเพื่อดูว่ามันทำงานอย่างไรเมื่อเข้าถึงคุณสมบัติ / คุณสมบัติของอินพุต ปุ่มและบางตัวเลือก ซอที่นี่: http://jsfiddle.net/pVBU8/1/

รับอินพุตทั้งหมด:

var allInputs = $(":input");

รับประเภทอินพุตทั้งหมด:

allInputs.attr('type');

รับค่า:

allInputs.val();

หมายเหตุ: .val () ไม่เหมือนกับ: ถูกเลือกสำหรับประเภทที่เกี่ยวข้อง ใช้:

.attr("checked");

แก้ไข 1 กุมภาพันธ์ 2013 - อีกครั้ง: jQuery 1.9 ใช้ prop () ไม่ attr () เนื่องจาก attr จะไม่ส่งคืนค่าที่เหมาะสมสำหรับคุณสมบัติที่มีการเปลี่ยนแปลง

.prop('checked');

หรือเพียงแค่

$(this).checked;

เพื่อให้ได้มูลค่าของเช็ค - ไม่ว่าจะเป็นอะไรก็ตาม หรือเพียงแค่ใช้ ': ตรวจสอบ' ถ้าคุณต้องการเฉพาะที่มีการตรวจสอบ

แก้ไข: ต่อไปนี้เป็นวิธีรับประเภท:

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

EDIT2: โปรดทราบว่ารูปแบบของ:

$('input:radio');

มีการอ้างถึงมากกว่า

$(':radio');

ซึ่งทั้งสองเท่ากับ:

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

แต่ต้องการ "อินพุท" ดังนั้นมันจะได้รับอินพุทและไม่ได้ใช้ยูนิเวอร์แซล '* "เมื่อใช้รูปแบบของ$(':radio')ซึ่งจะเท่ากับ$('*:radio');

แก้ไขสิงหาคม 19, 2015: การตั้งค่าสำหรับ$('input[type=radio]');ควรจะใช้เป็นแล้วอนุญาตให้เบราว์เซอร์ที่ทันสมัยเพื่อเพิ่มประสิทธิภาพการค้นหาสัญญาณวิทยุ

แก้ไข 1 กุมภาพันธ์ 2013 ต่อความคิดเห็นเรื่อง: องค์ประกอบที่เลือก @dariomac

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

จะส่งกลับทั้ง "select-one" หรือ "select-multiple" ขึ้นอยู่กับแอตทริบิวต์ "multiple" และ

$('select')[0].type 

ผลตอบแทนที่เหมือนกันสำหรับการเลือกแรกถ้ามันมีอยู่ และ

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

จะคืนค่าประเภทนั้นถ้ามันมีอยู่หรือ "howdy" ถ้าไม่มี

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

ส่งคืนคุณสมบัติของอันแรกใน DOM ถ้ามันมีอยู่หรือ "undefined" หากไม่มีอยู่

$('select').type

ส่งคืนชนิดของชนิดแรกหากมีอยู่หรือมีข้อผิดพลาดหากไม่มีอยู่

คุณสามารถทำสิ่งต่อไปนี้:

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

หากสิ่งที่คุณพูดคือคุณต้องการรับอินพุตทั้งหมดภายในฟอร์มที่มีค่าโดยไม่ต้องกังวลเกี่ยวกับประเภทอินพุตให้ลองทำดังนี้:

ตัวอย่าง: 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();

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

สถานที่ที่ดีที่สุดในการเริ่มมองหาคือ http://api.jquery.com/category/selectors/

นี่จะเป็นตัวอย่างที่ดีให้กับคุณ

การเลือกองค์ประกอบใน DOM นั้นทำได้โดยใช้ตัวเลือก CSS ดังนั้นหากคุณคิดว่าจะได้รับองค์ประกอบด้วย id คุณจะต้องใช้ $ ('# elementId') หากคุณต้องการให้แท็กอินพุตทั้งหมดใช้ $ ('input') และทำให้ส่วนที่ฉันคิดว่าคุณต้องการหากคุณต้องการแท็กอินพุตทั้งหมดที่มีประเภทของช่องทำเครื่องหมายใช้ $ ('อินพุต, [type = ช่องทำเครื่องหมาย])

หมายเหตุ: คุณจะพบค่าส่วนใหญ่ที่คุณต้องการอยู่ในแอตทริบิวต์ดังนั้นตัวเลือก css สำหรับแอตทริบิวต์คือ: [attributeName = value]

เพียงเพราะคุณขอให้ดร็อปดาวน์ดังที่ aposed ไปยัง listbox ลองทำสิ่งต่อไปนี้:

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

รหัสมาจากหน่วยความจำดังนั้นโปรดรับข้อผิดพลาดเล็กน้อย

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

ความคิดเห็นที่:

1. ฉันสมมติว่ามีองค์ประกอบแบบฟอร์มหนึ่งอย่างเท่านั้นซึ่งอาจเป็น textarea ช่องป้อนข้อมูลเลือกฟอร์มชุดปุ่มตัวเลือกหรือช่องทำเครื่องหมายเดียว (คุณจะต้องอัปเดตรหัสของฉันหากคุณต้องการช่องทำเครื่องหมายเพิ่มเติม)

2. องค์ประกอบที่เป็นปัญหาอาศัยอยู่ภายในองค์ประกอบที่มี ID container(เพื่อลบความไม่ชัดเจนขององค์ประกอบอื่น ๆ บนหน้าเว็บ)

3. รหัสจะส่งคืนค่าขององค์ประกอบการจับคู่แรกที่พบ ตั้งแต่ฉันใช้:checkedเป็นต้นไปนี่ควรเป็นคุณค่าของสิ่งที่คุณกำลังมองหาอยู่เสมอ

ดูเหมือนว่าฟังก์ชันการทำงานของ attr กำลังจะถูกยกเลิก

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

ในใบสมัครของฉันฉันจบลงด้วยสององค์ประกอบที่แตกต่างกันซึ่งมีรหัสเดียวกัน (ไม่ดี) องค์ประกอบหนึ่งคือ div และอีกอินพุตหนึ่ง ฉันพยายามสรุปอินพุตของฉันและใช้เวลาสักครู่เพื่อรับรู้รหัสที่ซ้ำกัน โดยการวางประเภทขององค์ประกอบที่ฉันต้องการหน้า # ฉันสามารถคว้าค่าขององค์ประกอบอินพุตและทิ้ง div:

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

ฉันหวังว่ามันจะช่วย

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

ฉันได้รับประเภทรูปแบบไรท์