Jquery checkbox array values placed into unique div by data attribute

Question

I have two seperate divs with the class filterTag which are using the data-filter to target checkboxes inside. I am trying to get the checkbox values into the required list1 or list2 areas.

I need my arrays to run seperately with the data-filter element so we have two clear lists as to what data will be pushed into the desired list1 or list2 divs depending on the checkbox value.

I need to use the data-filter element due to the way the templates are loaded, I can't customise the content within the filterTag container.

Please help, I am super close but getting stuck.

$(document).on('change', '.filterTag .ais-refinement-list__checkbox', function() {
  getValueUsingParentTag();
});


function getValueUsingParentTag() {

  var chkArray = [];

  $('.filterTag .ais-refinement-list__checkbox:checked').each(function() {
    var target2 = $(this).parentsUntil('.filterTag').parent().data('filter');
    chkArray.push($(this).val());
    return this.value;
  });

  var selected;
  selected = chkArray.join(', ');

  if (selected.length > 0) {

    console.log(selected);
  }
}

Here is my jsfiddle

can you describe which content should be in the array (i.e.: two objects? two subarray?...) — gaetanoM
– gaetanoM, Commented Aug 23, 2018 at 19:27
Hi, so I am looking to show the checkbox values in array list 1 for list 1. Then for list 2 a separate array list. Essentially I want to load in the two div lists the values or the checkbox selections. — Bradley
– Bradley, Commented Aug 23, 2018 at 19:33

gaetanoM · Accepted Answer · 2018-08-23 19:38:07Z

In order to achieve your result you can simply rewrite your loop:

function getValueUsingParentTag() {
    $('[id^="list"]').empty(); // empty divs
    $('.filterTag .ais-refinement-list__checkbox:checked').each(function(idx, ele) {
        var target2 = $(this).closest('.filterTag').data('filter');
        $(target2).html(function(idx, html) { // append to the right div....
            return html.length == 0 ? ele.value : html + ', ' + ele.value;
        });
    });
}

$(document).on('change', '.filterTag .ais-refinement-list__checkbox', function() {
    getValueUsingParentTag();
});


function getValueUsingParentTag() {
    $('[id^="list"]').empty(); // empty divs
    $('.filterTag .ais-refinement-list__checkbox:checked').each(function(idx, ele) {
        var target2 = $(this).closest('.filterTag').data('filter');
        $(target2).html(function(idx, html) {
            return html.length == 0 ? ele.value : html + ', ' + ele.value;
        });
    });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>List 1</h2>
<div class="filterTag ais-refinement-list" id="uniqueID1" data-filter="#list1">
    <div class="ais-refinement-list__item">
        <label>
            <input type="checkbox" class="ais-refinement-list__checkbox" value="Small">
            <span>Small</span></label>
    </div>
    <div class="ais-refinement-list__item">
        <label>
            <input type="checkbox" class="ais-refinement-list__checkbox" value="Medium">
            <span>Medium</span></label>
    </div>
</div>
<div id="list1"></div>
<h2>List 2</h2>
<div class="filterTag ais-refinement-list" id="uniqueID2" data-filter="#list2">
    <div class="ais-refinement-list__item">
        <label>
            <input type="checkbox" class="ais-refinement-list__checkbox" value="Alloy">
            <span>Alloy</span></label>
    </div>
    <div class="ais-refinement-list__item">
        <label>
            <input type="checkbox" class="ais-refinement-list__checkbox" value="Carbon">
            <span>Carbon</span></label>
    </div>
</div>
<div id="list2"></div>

Wow dude I don't know what to say, when comparing the two I can see I had somewhat over complicated things but you have completely hit the nail on the head here.. Thank you so much, really appreciated.

Collectives™ on Stack Overflow

Jquery checkbox array values placed into unique div by data attribute

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related