選中后，將復選框的值復制到數組中

Question

我正在使用jQuery，這是我的代碼到目前為止：

$('.CategoryInput').each(function() {
    $(this).click(function() {
        var CategoryID  = $( this ).attr( "category" );
        var Clicked     = $( this ).attr( "clicked" );
        if(Clicked == 0){
            $("#Category" + CategoryID).css({backgroundColor: '#fc3b66'});
            $("#Category" + CategoryID).find( ".state" ).css({color: '#fff'});
            $(".subcat" + CategoryID).css({backgroundColor: '#fc3b66'});
            $(".subcat" + CategoryID).find( ".state" ).css({color: '#fff'});
            $(".SubCategoryInput" + CategoryID).prop('checked', true);
            $(".SubCategoryInput" + CategoryID).attr('clicked','1');
            $(this).attr('clicked','1');
        } else {                    
            $("#Category" + CategoryID).css({backgroundColor: '#fdfdfd'});
            $("#Category" + CategoryID).find( ".state" ).css({color: '#6a6d76'});
            $(".subcat" + CategoryID).css({backgroundColor: '#fdfdfd'});
            $(".subcat" + CategoryID).find( ".state" ).css({color: '#6a6d76'});
            $(".SubCategoryInput" + CategoryID).prop('checked', false);
            $(".SubCategoryInput" + CategoryID).attr('clicked','0');
            $(this).attr('clicked','0');
        }

        });

});

這是我的HTML：

 <div class="container">                 
    <h1>Selecciona los productos que elaboras:</h1>
    <?PHP
    $r = mysql_query("SELECT * FROM `Category` WHERE `subCategory`='0' ORDER by Position ASC");
        while($rowi = mysql_fetch_array($r))
                {
                $id = $rowi['id'];
                $Name = $rowi['Name'];
                $Description = $rowi['Description'];

    ?>
    <div class="row">
        <div class="maintag" id="Category<?PHP echo $id;?>">
            <label class="state" for="categories"><?PHP echo $Name;?></label>
            <input type="checkbox" class="CategoryInput" name="categories" category="<?PHP echo $id;?>" clicked="0">          
            (<?PHP echo $Description;?>)
        </div>
    </div>
    <div class="row">
    <?PHP 
        $r1 = mysql_query("SELECT * FROM `Category` WHERE `subCategory`='$id' ORDER by Position ASC");
            while($rowi1 = mysql_fetch_array($r1))

            {
                $id1 = $rowi1['id'];
                $Name1 = $rowi1['Name'];                                
    ?>

        <div class="col-md-4" style="padding-left:0px;">
            <div id="subtag<?PHP echo $id1;?>" class="subcat<?PHP echo $id;?> supersub">
                <label class="state" for="categories"><?PHP echo $Name1;?></label>
                <input type="checkbox" name="subcategory" class="SubCategoryInput<?PHP echo $id;?>" SubCategory="<?PHP echo $id1;?>" clicked="0">          
            </div>
        </div>  

                <?PHP } ?>
        </div>      
<?PHP } ?>
</div>                          

我有幾個復選框，我用作類別。 這些類別具有子類別，因此此代碼只是突出顯示所選的復選框。 如果所選復選框來自母類別，則會突出顯示所有子類別的所有復選框。 還將它們設置為已checked 。

我到目前為止所取得的一切。 現在我被困在如何獲取所選復選框的id並將其添加到如下所示的變量中：

var SelectedCategoryIDs = '12,435,123,124,56,34,23';

因此，當我單擊一個母類別時，它將向SelectedCategoryIDs添加所有子類別的ID。 此外，當我取消選中已經檢查過的母類別時，它將從SelectedCategoryIDs刪除所有與所有子類別對應的ID。

你能幫我實現嗎？

我希望我解釋得很好，如果您有任何疑問，請告訴我。

Answer 1

只需創建一個數組，然后用逗號分隔加入它：

var selectedArray = [];
$('.CategoryInput').each(function() {
    $(this).click(function() {
      selectedArray.push($(this).attr('id'));
    });
});

/* and then join: */

var selectedString = selectedArray.join(","); // you'll give all ids comma separated

Answer 2

在click回調結束時，只需添加即可

 var SelectedCategoryIDs = ''; $('.CategoryInput').each(function() { $(this).click(function() { // Include the old code here... // Here's the new part SelectedCategoryIDs = $('.CategoryInput[clicked=1]') .map(function() { return this.category; }) .get() .join(','); }); }); 

Answer 3

以下是您要實現的目標示例 。 我已經使用了underscore.js和jquery，因為我喜歡它提供的實用方法。

基本上我的事件處理程序看起來像這樣。 _.without函數基本上將返回沒有未經檢查的值的數組。

$(document).ready(function(){
var arr = [];
$("input:checkbox").on("click", function(){
    if ($(this).is(":checked")){
    arr.push($(this).val());
  }
  else {
    arr = _.without(arr, $(this).val());
  }
  $("#arr").text(arr);
 });
})

---

這是沒有下划線js的更新代碼

https://jsfiddle.net/hrt7cxvp/26/

$(document).ready(function(){
var selectedArray = [];
$("input:checkbox").on("click", function(){
    if ($(this).is(":checked")){
    selectedArray.push($(this).val());
  }
  else {
    selectedArray.splice(selectedArray.indexOf($(this).val()));
  }
  $("#arr").text(selectedArray);
 });
})