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], context: document, jquery: "1.9.1", constructor function: ..

ฉันต้องการเพียง ID (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__ ไม่มี

ขอบคุณมากฉันต้องการสิ่งนี้สำหรับ ma Ticketcenter
Steven

2
สิ่งที่ฉันไม่ได้รับเกี่ยวกับเรื่องนี้คือเหตุผลที่.get()จำเป็นเมื่อฟังก์ชันส่งคืน.val()จากแต่ละรายการในคอลเลกชัน jQuery เป็นเพราะmapเปลี่ยนมันกลับเป็นวัตถุ jQuery ก่อนที่จะส่งต่อไปsearchIDsหรือไม่?
iconoclast

เราสามารถรับค่าเป็นประเภทอาร์เรย์ได้หรือไม่?
krutssss

22

สาธิต: http://jsfiddle.net/PBhHK/

$(document).ready(function(){

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

      return $(this).val();

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

});

เพียงแค่โทร 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();
});

และมีคำตอบมากมายที่นี่ซึ่งช่วยปรับปรุงโค้ดของฉัน แต่ก็ซับซ้อนเกินไปหรือไม่ตรงตามที่ฉันต้องการ: แปลงข้อมูลฟอร์มเป็นวัตถุ JavaScript ด้วย jQuery

ใช้งานได้ แต่สามารถปรับปรุงได้: ใช้ได้เฉพาะกับอาร์เรย์แบบมิติเดียวและดัชนีผลลัพธ์อาจไม่เป็นลำดับ คุณสมบัติ length ของอาร์เรย์จะส่งคืนหมายเลขดัชนีถัดไปเป็นความยาวของอาร์เรย์ไม่ใช่ความยาวจริง

หวังว่านี่จะช่วยได้ Namaste!



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

}); 
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.