如何將複選框的值收集到jQuery中的Array中

因此我有一個帶有div的模塊彈出窗口。在其中有幾個複選框，我想要做的是在用戶完成檢查或取消選中他想要的框後點擊完成按鈕。我希望jQuery將所有選定的值轉儲到一個arrray中。如何將複選框的值收集到jQuery中的Array中

最初我只是將所檢查的內容添加到數組中，但是如果用戶決定取消選中，則嘗試從數組中刪除選中的項目時遇到問題。以上述的方式做它似乎是類似的方法。我創建了一個Codepen here。

我的jQuery

$('.select-roles').click(function(){ 
    var selectedRole = $(this).html(); 

    var selectedArray = new Array(); 

    $('roleId input:checked').each(function() { 
     selectedArray.push($(this).val()); 
     console.log($(this).val()); 
    }); 

    console.log('modalName = '+modalName); 
    console.log('selected array contains: '+selectedArray); 
}); 

// displays the value of the checked checkbox in the console 
$('input[type=checkbox]').click(function() { 

    if($(this).is(':checked')){ 
     console.log($(this).val()) 
    } 
});

HTML

<div id="modal-TV"> 

     <div class="modal-top"> 
      <div class="modal-title">Actor: Select one or more genres below</div> 

     </div> 

     <div class="modal-choices"> 
      <div class="modal-col-1"> 
       <ul> 
        <li><input type="checkbox" value="Adult Animated">Adult Animated</li> 
        <li><input type="checkbox" value="Anime">Anime</li> 
        <li><input type="checkbox" value="Award Shows">Award Shows</li> 
        <li><input type="checkbox" value="Behind The Scenes">Behind The Scenes</li> 
        <li><input type="checkbox" value="Christian">Christian</li> 
       </ul> 
      </div> 

      <!-- modal-choices --> 

     <div class="modal-dashes"></div> 
     <div class="modal-buttons"> 
      <ul> 
       <a class="close" title="Cancel"><li>Cancel</li></a> 
       <li class="select-roles">Done</li> 
      </ul> 
     </div> 
    </div> 
    <!-- modal-TV -->

來源

2013-04-03 Leon Gaban

您需要使用頂部的「保存」按鈕（靠近他們的標誌）保存您的CodePen，然後給我們這個鏈接。現在你只需鏈接到CodePen的主站點。另外，你可以在CodePen中使用jQuery;點擊JS欄上的扳手圖標（設置圖標），然後選擇一個庫。就像這樣：http://codepen.io/anon/pen/HethI – 2013-04-03 18:55:42

保存！感謝http://codepen.io/leongaban/pen/aJiut，雖然我只是想通了出來......我的變量包含我的ID由於某種原因沒有工作指向該div，所以我刪除它，只是使用：$（ 'input：checked'）也剛剛發現這個http://stackoverflow.com/questions/786142/how-to-retrieve-checkboxes-values-in-jquery – 2013-04-03 18:56:31

試試這個腳本

 $(function() { 
     function dumpInArray(){ 
      var arr = []; 
      $('.modal-choices input[type="checkbox"]:checked').each(function(){ 
       arr.push($(this).val()); 
      }); 
      return arr; 
     } 

     $('.select-roles').click(function() { 
      dumpInArray(); 
     }); 
    });

它，在中點擊「完成」，選擇所有在.select-roles選中的複選框，並返回其值在陣列中

來源

2013-04-03 19:00:49 Ejaz

感謝張貼！我無法得到它的工作:( – 2013-04-03 19:21:49

試試這個小提琴http://jsfiddle.net/dnQQv/ – Ejaz 2013-04-03 19:25:37

甜，完美的作品！:) – 2013-04-03 19:31:53

如何將複選框的值收集到jQuery中的Array中

回答

相關問題