Jquery का उपयोग करके इनपुट प्रकार कैसे प्राप्त करें?


147

मेरे पास एक पृष्ठ है जहां इनपुट प्रकार हमेशा भिन्न होता है, और मुझे इनपुट प्रकार के आधार पर मान प्राप्त करने की आवश्यकता होती है। इसलिए यदि प्रकार एक रेडियो है, तो मुझे प्राप्त करने की आवश्यकता है, जिसे चेक किया गया है, और यदि यह एक चेकबॉक्स है, तो मुझे अब चेक करने की आवश्यकता है, और यदि यह एक ड्रॉप डाउन है, तो मुझे यह जानना होगा कि मुझे कौन सा चयन करना है, और मुझे यह पसंद है एक पाठ / textarea मैं मूल्यों को जानने की जरूरत है।

कैसे करना है पर कोई विचार?


2
दोस्तों आप सभी इनपुट आईडी के आधार पर हैं, लेकिन रेडियो या चेक बॉक्स के मामले में, क्या मेरे पास एक ही आईडी होना चाहिए? यह जानना कि आईडी अद्वितीय होनी चाहिए।
लुसी जूल

जवाबों:


270

EDIT फ़रवरी 1, 2013. गुणों और विशेषताओं के बारे में इस उत्तर की लोकप्रियता और संस्करण 1.9 (और 2.0) में jQuery के बदलाव के कारण, मैंने कुछ नोट्स और एक बेला जोड़ा, यह देखने के लिए कि यह इनपुट पर गुणों / विशेषताओं को एक्सेस करते समय कैसे काम करता है, बटन और कुछ का चयन करता है। यहाँ की पहेली: http://jsfiddle.net/pVBU8/1/


सभी इनपुट प्राप्त करें:

var allInputs = $(":input");

सभी इनपुट प्रकार प्राप्त करें:

allInputs.attr('type');

मान प्राप्त करें:

allInputs.val();

नोट: .val () के समान नहीं है: उन प्रकारों के लिए जाँच की गई जहां यह पुन: स्थित है। उपयोग:

.attr("checked");

EDIT 1 फरवरी, 2013 - पुनः: jQuery 1.9 का उपयोग प्रोप () नहीं attr () के रूप में attr बदल दिया है कि गुणों के लिए उचित मूल्यों वापस नहीं होगा।

.prop('checked');

या केवल

$(this).checked;

चेक का मूल्य प्राप्त करने के लिए - जो भी वर्तमान में है। या बस ': चेक' का उपयोग करें यदि आप केवल वही हैं जो चेक किए गए हैं।

EDIT: यहाँ टाइप करने का एक और तरीका है:

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

EDIT2: ध्यान दें कि इसका रूप:

$('input:radio');

से अधिक है

$(':radio');

जो दोनों समान हैं:

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

लेकिन "इनपुट" वांछित है, इसलिए यह केवल इनपुट प्राप्त करता है और सार्वभौमिक '* "का उपयोग नहीं करता है जब $(':radio')उपयोग किया जाता है जो इसके बराबर होता है$('*:radio');

EDIT अगस्त 19, 2015: वरीयता का $('input[type=radio]');उपयोग किया जाना चाहिए क्योंकि तब आधुनिक ब्राउज़रों को रेडियो इनपुट के लिए खोज का अनुकूलन करने की अनुमति मिलती है।


EDIT फ़रवरी 1, 2013 प्रति टिप्पणी पुनः: तत्वों का चयन करें @dariomac

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

"एकाधिक" विशेषता के आधार पर या तो "चयन-एक" या "चयन-एकाधिक" वापस आ जाएगा

$('select')[0].type 

यदि यह मौजूद है तो पहले चयन के लिए समान लौटाता है। तथा

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

यदि यह मौजूद है या "हाउडी" यदि यह नहीं है तो टाइप वापस कर देगा।

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

यदि यह मौजूद है या "अपरिभाषित" यदि कोई मौजूद नहीं है, तो डोम में पहले वाले की संपत्ति लौटाता है।

$('select').type

यदि मौजूद हो या पहले से मौजूद कोई त्रुटि हो तो पहले वाले के प्रकार को लौटाता है।


मैंने इसे आज़माया: var type = $ (": input [name =" + name + "]")। attr ('type'); और यह काम किया! धन्यवाद।
लूसी

2
और "ड्रॉपडाउन" या इनपुट का चयन करने के बारे में क्या ...? क्योंकि यह एक इनपुट टैग नहीं है ... मुझे अभी भी यही समस्या है लेकिन मैं टाइप डोम संपत्ति का उपयोग करने के बारे में सोच रहा हूं ...
dariomac

allInputs.attr('type');केवल पहला तत्व इनपुट प्रकार प्राप्त करेगा अर्थात। allInputs[0].attr('type');यदि संग्रह में एक से अधिक तत्व हैं। वही allInputs.val();अगर आप प्रत्येक तत्व के प्रकार या मूल्य के साथ कुछ करना चाहते हैं, तो आपको कुछ ऐसा करना होगाallInputs.each(function(){ var type = $(this).attr('type'); var val = $(this).val() });
andyface

LOL कि इस तिथि के रूप में 82 संशोधनों के साथ अपने स्वयं के जीवन पर बेला लिया है। jsfiddle.net/pVBU8/82
मार्क शुलथिस

15

आप निम्नलिखित कर सकते हैं:

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

इसका मतलब यह है कि मुझे प्रत्येक रेडियो देना होगा / उसी आईडी की जांच करनी होगी?
लुसी

6
@zeina - तत्वों को कभी भी एक ही आईडी दें।
user113716

@ patrick- मुझे पता है कि आईडी अद्वितीय होनी चाहिए, फिर भी वे आईडी द्वारा इनपुट प्रकार प्राप्त करने का सुझाव क्यों दे रहे हैं, और मेरे पास रेडियो और चेक बॉक्स हो सकते हैं जिसमें मैं उनके नामों पर निर्भर रहूँगा?
लुसी जूल

1
नहीं, आप उन्हें एक ही आईडी नहीं दे सकते, जो मान्य नहीं है। आप का उपयोग कर सकते हैं: इनपुट jQuery के चयनकर्ता
मार्क शुलथिस

9

यदि आप जो कह रहे हैं कि आप इनपुट के बारे में चिंता किए बिना एक मूल्य के अंदर सभी इनपुट प्राप्त करना चाहते हैं, तो यह प्रयास करें:

उदाहरण: 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();

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


4

तलाश शुरू करने के लिए सबसे अच्छी जगह है http://api.jquery.com/category/selectors/

यह आपको उदाहरणों का एक अच्छा सेट देगा।

अंततः DOM में तत्वों का चयन CSS चयनकर्ताओं का उपयोग करके प्राप्त किया जाता है, इसलिए यदि आप आईडी द्वारा एक तत्व प्राप्त करने के बारे में सोचते हैं, तो आप $ ('# elementId') का उपयोग करना चाहेंगे, यदि आप चाहते हैं कि सभी इनपुट टैग $ ('इनपुट') का उपयोग करें और जिस भाग को मैं समझता हूं कि आप चाहते हैं कि आप एक प्रकार के चेकबॉक्स के साथ सभी इनपुट टैग का उपयोग करना चाहते हैं

नोट: आप जिन मूल्यों को चाहते हैं, उनमें से अधिकांश विशेषताओं पर आपको मिल जाएंगे इसलिए विशेषताओं के लिए सीएसएस चयनकर्ता है: [विशेषतानाम = मान]

सिर्फ इसलिए कि आपने ड्रॉपडाउन के लिए कहा था कि एक सूची बॉक्स के लिए आवेदन किया गया था:


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

कोड मेमोरी से था इसलिए कृपया छोटी-छोटी त्रुटियों के लिए जमा करें


यहाँ किस '' आकार] 'का जिक्र है?
अजनबी

@Udhayakumar '[size]' परिणामों को फ़िल्टर करेगा जिसमें केवल चुनिंदा तत्वों को आकार विशेषता के साथ शामिल किया जाएगा, इस प्रकार केवल सूची बक्सों का चयन किया जाएगा न कि ड्रॉप डाउन का।
रॉबर्ट

सूची बॉक्स -> क्या आपका मतलब टेक्स्ट बॉक्स है?
अजनबी

1
@Udhayakumar, no i mean list box, एक ड्रॉप डाउन और एक सूची बॉक्स के बीच अंतर देखने के लिए इस लिंक [ jsfiddle.net/565961fj ] का अनुसरण करें ।
रॉबर्ट

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

टिप्पणियाँ:

  1. मेरा मानना ​​है, कि वास्तव में एक फॉर्म एलिमेंट है, जो टेक्सटेरिया, इनपुट फील्ड, सेलेक्ट फॉर्म, रेडियो बटन या सिंगल चेकबॉक्स का सेट हो सकता है (यदि आपको और चेकबॉक्स की जरूरत है तो आपको मेरा कोड अपडेट करना होगा)।

  2. प्रश्न का तत्व आईडी के साथ एक तत्व के अंदर रहता है container(पृष्ठ पर अन्य तत्वों के साथ अस्पष्टता को दूर करने के लिए)।

  3. कोड उसके बाद मिलने वाले पहले तत्व का मान लौटाएगा । चूंकि मैं उपयोग करता हूं :checkedऔर इसी तरह, यह हमेशा वही होना चाहिए जो आप देख रहे हैं।


3

ऐसा लगता है कि attr कार्यक्षमता आगे पदावनत हो रही है

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

0

अपने आवेदन में मैंने एक ही आईडी (खराब) वाले दो अलग-अलग तत्वों को समाप्त किया। एक तत्व एक div और दूसरा एक इनपुट था। मैं अपने इनपुट को समेटने की कोशिश कर रहा था और मुझे डुप्लिकेट आईडी का एहसास करने में थोड़ा समय लगा। मैं # के सामने जो तत्व चाहता था, उसके प्रकार को रखकर, मैं इनपुट तत्व के मूल्य को हथियाने और div को त्यागने में सक्षम था:

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

मुझे उम्मीद है यह मदद करेगा।


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

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

मुझे राइट फॉर्म टाइप मिलता है

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.