Getting flag value in array during validation

Question

I am working with jQuery, and so far this is my code:

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

        });

});

Here is my 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>                          

I have several checkboxes that I use as categories. These categories have subcategories, so this code simply highlights the checkboxes that are selected. If the selected flag is in the mother category, it selects all the flags for all categories of children. Also set them as checked.

All that I have achieved as far as I want. Right now, I am fixated on how I can get the identifier of the selected checkbox and add it to a variable similar to this:

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

, , SelectedCategoryIDs . , , SelectedCategoryIDs, .

?

, , - , , .

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 the new part
    SelectedCategoryIDs =
      $('.CategoryInput[clicked=1]')
      .map(function() {
        return this.category;
      })
      .get()
      .join(',');
  });
});

Hide result

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