jQuery सरणी में चेक किए गए चेकबॉक्स के मान प्राप्त करें


129

मैं उन सभी चेकबॉक्सों के मूल्यों को प्राप्त करने की कोशिश कर रहा हूं जो वर्तमान में चेक किए गए हैं और उन्हें एक सरणी में संग्रहीत करते हैं। यहाँ अब तक मेरा कोड है:

 $("#merge_button").click(function(event){
    event.preventDefault();
    var searchIDs = $("#find-table input:checkbox:checked").map(function(){
      return $(this).val();
    });
    console.log(searchIDs);
  });

हालांकि यह जरूरत से ज्यादा आउटपुट है। मुझे न केवल मूल्य मिलते हैं, बल्कि कुछ अन्य सामान जो मुझे नहीं चाहिए।

["51729b62c9f2673e4c000004", "517299e7c9f26782a7000003", "51729975c9f267f3b5000002", prevObject: jQuery.fn.jQuery.init [3], संदर्भ, दस्तावेज़: jquery: 1.9.1: "1.917"

मैं सिर्फ आईडी (इस मामले में पहले 3 आइटम) चाहूंगा।

$.eachवांछित आउटपुट प्राप्त करने के लिए मानों का उपयोग करके और उन्हें धकेल कर :

$("#find-table input:checkbox:checked").each(function(){ myArray.push($(this).val()); })

["51729b62c9f2673e4c000004", "517299e7c9f26782a7000003", "51729975c9f267f3b5000002"

हालाँकि, मैं इसका उपयोग करना चाहूंगा $.map, क्योंकि यह मुझे कोड की एक पंक्ति बचाता है और प्रीटियर है।

धन्यवाद

जवाबों:


262

.get()परिणामी jQuery ऑब्जेक्ट को एक सच्चे सरणी में बदलने के लिए बहुत अंत में कॉल करें ।

$("#merge_button").click(function(event){
    event.preventDefault();
    var searchIDs = $("#find-table input:checkbox:checked").map(function(){
      return $(this).val();
    }).get(); // <----
    console.log(searchIDs);
});

प्रति प्रलेखन :

जैसा कि रिटर्न वैल्यू एक jQuery ऑब्जेक्ट है, जिसमें एक सरणी होती है, यह मूल सरणी के साथ काम करने के लिए परिणाम पर .get () कॉल करने के लिए बहुत आम है।


1
मैं सच्चे ऐरे से उम्मीद कर रहा था $.map। समाधान के लिए धन्यवाद, यह काम करता है।
अगर __name__

बहुत बहुत धन्यवाद मैं मा Ticketcenter के लिए इसकी जरूरत है
स्टीवन

2
इस बारे में मुझे जो बात नहीं आती, .get()वह यह है कि जब .val()jQuery संग्रह में प्रत्येक आइटम से फ़ंक्शन वापस आ रहा है, तो इसकी आवश्यकता क्यों है । क्या ऐसा इसलिए है क्योंकि mapइसे पास करने से पहले इसे एक jQuery ऑब्जेक्ट में बदल दिया जाता है searchIDs?
आइकनोकॉस्ट

क्या हम सरणी प्रकार के रूप में मान प्राप्त कर सकते हैं?
krutssss

22

डेमो: http://jsfiddle.net/PBhHK/

$(document).ready(function(){

    var searchIDs = $('input:checked').map(function(){

      return $(this).val();

    });
    console.log(searchIDs.get());

});

बस कॉल करें () और आपके पास आपकी सरणी होगी जैसा कि चश्मा में लिखा गया है: http://api.jquery.com/map/

$(':checkbox').map(function() {
      return this.id;
    }).get().join();

18

आपको .toArray()अपने .map()फ़ंक्शन के अंत में जोड़ने की आवश्यकता है

$("#merge_button").click(function(event){
    event.preventDefault();
    var searchIDs = $("#find-table input:checkbox:checked").map(function(){
        return $(this).val();
    }).toArray();
    console.log(searchIDs);
});

डेमो: http://jsfiddle.net/sZQtL/


10

मैंने आपका कोड थोड़ा बदल दिया और मुझे विश्वास है कि मैं उस समाधान के साथ आया था जिसके लिए आप देख रहे थे। मूल रूप searchIDsसे .map()मैं केवल एक सरणी में मूल्यों को धकेलने का परिणाम बनने के बजाय ।

$("#merge_button").click(function(event){
  event.preventDefault();

  var searchIDs = [];

  $("#find-table input:checkbox:checked").map(function(){
    searchIDs.push($(this).val());
  });

  console.log(searchIDs);
});

मैंने कोड चलने के साथ एक फिडेल बनाया ।



1

HTML में नामित तत्वों को एक सरणी के रूप में जावास्क्रिप्ट ऑब्जेक्ट में एक सरणी होने की आवश्यकता है, जैसे कि फॉर्म वास्तव में प्रस्तुत किया गया था।

यदि कई चेकबॉक्स के साथ एक फार्म है जैसे:

<input name='breath[0]' type='checkbox' value='presence0'/>
<input name='breath[1]' type='checkbox' value='presence1'/>
<input name='breath[2]' type='checkbox' value='presence2'/>
<input name='serenity'  type='text' value='Is within the breath.'/>
...

परिणाम के साथ एक वस्तु है:

data = {
   'breath':['presence0','presence1','presence2'],
   'serenity':'Is within the breath.'
}


var $form = $(this),
    data  = {};

$form.find("input").map(function()
{
    var $el  = $(this),
        name = $el.attr("name");

    if (/radio|checkbox/i.test($el.attr('type')) && !$el.prop('checked'))return;

    if(name.indexOf('[') > -1)
    {
        var name_ar = name.split(']').join('').split('['),
            name    = name_ar[0],
            index   = name_ar[1];

        data[name]  = data[name] || [];
        data[name][index] = $el.val();
    }
    else data[name] = $el.val();
});

और यहाँ जवाब के टन हैं जिन्होंने मेरे कोड को बेहतर बनाने में मदद की है, लेकिन वे या तो बहुत जटिल थे या बिल्कुल नहीं चाहते थे कि मैं चाहता हूं: जावास्क्रिप्ट ऑब्जेक्ट को jQuery के साथ डेटा रूपांतरित करें

काम करता है लेकिन सुधार किया जा सकता है: केवल एक आयामी सरणियों पर काम करता है और परिणामस्वरूप अनुक्रमित अनुक्रमिक नहीं हो सकता है। किसी सरणी की लंबाई गुण सरणी की लंबाई के रूप में अगला इंडेक्स नंबर देता है, वास्तव में लंबाई नहीं।

आशा है कि इससे मदद मिली। नमस्ते!



0

"प्रत्येक" का उपयोग न करें। इसका उपयोग उसी तत्व के संचालन और परिवर्तनों के लिए किया जाता है। तत्व बॉडी से डेटा निकालने और कहीं और उपयोग करने के लिए "मैप" का उपयोग करें।


JQuery के डॉक्स में सबसे अधिक सब कुछ के लिए महान उदाहरण हैं, जिनमें शामिल हैंmap
jinglesthula

0

यहाँ पेजों पर चेकबॉक्सों की श्रेणी की अनुमति देता है और var उन्हें एक सरणी में इकट्ठा करने की अनुमति देता है और आप लूप के लिए चेक किए गए सत्य की जांच कर सकते हैं और फिर व्यक्तिगत रूप से वांछित ऑपरेशन कर सकते हैं। यहां मैंने कस्टम वैधता निर्धारित की है। मुझे लगता है कि यह आपकी समस्या को हल कर देगा।

  $(".allows").click(function(){
   var allows = document.getElementsByClassName('allows');
   var chkd   = 0;  
   for(var i=0;i<allows.length;i++)
   {
       if(allows[i].checked===true)
       {
           chkd = 1;
       }else
       {

       }
   }

   if(chkd===0)
   {
       $(".allows").prop("required",true);
       for(var i=0;i<allows.length;i++)
        {
        allows[i].setCustomValidity("Please select atleast one option");
        }

   }else
   {
       $(".allows").prop("required",false);
       for(var i=0;i<allows.length;i++)
        {
        allows[i].setCustomValidity("");
        }
   }

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