Selecting unique values from multiples array in Jquery

Question

I am trying to get only unique data while selecting checkbox input fields. But because of getting two values from a single input , I cannot use unique function.

jQuery('#showselected').on('click', function() {


      var selected = jQuery("#checkboxes input:checked").map(function(i, el) {
        return {
          datatitle: jQuery(this).attr('data-title'),
          dataid: jQuery(this).attr(' data-value')
        };
      }).get();
        jQuery('#rez').empty();

 
      jQuery.each(jQuery.unique(selected), function(key, value) {

        jQuery('#rez').append(value.datatitle);


      });
});

#rez {border:1px solid red}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="checkboxes">
  <input type="checkbox" name="1" data-title="something1" data-value="someid1" />
  <label>something1</label>
  <input type="checkbox" name="2" data-title="something2"  data-value="someid2" />
  <label>something2</label>
  <input type="checkbox" name="3" data-title="something3"  data-value="someid3" />
  <label>something3</label>
  <input type="checkbox" name="4" data-title="something3"  data-value="someid3" />
  <label>something3</label>

</div>
<button id="showselected">
show selected
</button>  Select above input boxes to see what's been selected.

<div id="rez">
</div>

They are different checkbox fields with different [name] attributes. — Mac Taylor
– Mac Taylor, Commented Apr 19, 2018 at 4:34
@CertainPerformance What do you mean by particular ID and multiple elements ! , there is a Div and some input fields which they how their own specific values and attributes. I want to stop showing two "something3" — Mac Taylor
– Mac Taylor, Commented Apr 19, 2018 at 4:37
Oh, I misread it, sorry about that, I confused myself on your someids — CertainPerformance
– CertainPerformance, Commented Apr 19, 2018 at 4:44

Anfath Hifans · Accepted Answer · 2018-04-19 05:22:49Z

1

You are using jQuery.unique for object value, it doesn't work.

update your last line with this code

var data = [];
jQuery.each(selected, function(key, value) {            
    if(jQuery.inArray(value.datatitle, data) < 0){
        data.push(value.datatitle);                
    }            
});
jQuery('#rez').append(data.join(', '));

edited Apr 19, 2018 at 5:22

answered Apr 19, 2018 at 4:44

Anfath Hifans

1,5981 gold badge12 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

CertainPerformance · Accepted Answer · 2018-04-19 04:42:49Z

I think you can achieve this more easily with vanilla JS and Set, no need for a big library:

document.querySelector('#showselected').addEventListener('click', () => {
  const dataTitles = [...document.querySelectorAll('#checkboxes input:checked')]
    .map(checkbox => checkbox.getAttribute('data-title'));
  const titlesDeduped = [...new Set(dataTitles)];
  document.querySelector('#rez').textContent = titlesDeduped.join(', ');
});

#rez {border:1px solid red}

<div id="checkboxes">
  <input type="checkbox" name="1" data-title="something1" data-id="someid1" />
  <label>something1</label>
  <input type="checkbox" name="1" data-title="something2" data-id="someid2" />
  <label>something2</label>
  <input type="checkbox" name="1" data-title="something3" data-id="someid3" />
  <label>something3</label>
  <input type="checkbox" name="1" data-title="something3" data-id="someid3" />
  <label>something3</label>

</div>
<button id="showselected">
show selected
</button>  Select above input boxes to see what's been selected.

<div id="rez">
</div>

Collectives™ on Stack Overflow

Selecting unique values from multiples array in Jquery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related