How to stop Duplicate value in this code

How to stop Duplicate value in this code

HTML

   <ul class="care-ul">
        <li><a><input type="checkbox" value="Disease" /> Disease</a></li>
        <li><a><input type="checkbox" value="Failure"/> Failure</a></li>
        <li><a><input type="checkbox" value="Wounds"/>  Wounds</a></li>
        <li><a><input type="checkbox" value="Afib"/> Afib</a></li>
    </ul>

Javascript

var carevalue = [];

function questionCount() {

    $.each($('input[type="checkbox"]:checked'), function () {
        var value = $(this).val();
        carevalue.push(value);
    });           

    var json = JSON.stringify(carevalue);
    var obj = JSON.parse(json);
    $('.new-lists li').html(obj);
        }

$(document).ready(function () {
    $('#apply').click(function () {
        questionCount();
    });
});

Upvotes: 1

Views: 73

Answers (2)

Bourbia Brahim
Bourbia Brahim

Reputation: 14702

Use indexOf to test if value already added to the array: Here is a working Snippet

var carvalue = [];

function questionCount() {

    $.each($('input[type="checkbox"]:checked'), function () {
        var value = $(this).val();
        if(carvalue.indexOf(value)==-1)
        carvalue.push(value);
       
    });           

    var json = JSON.stringify(carvalue);
    var obj = JSON.parse(json);
    console.log(obj);
    $('.new-lists li').html(obj);
}

$(document).ready(function () {
    $('#apply').click(function () {
        questionCount();
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="care-ul">
    <li><a><input type="checkbox" value="Disease" /> Disease</a></li>
    <li><a><input type="checkbox" value="Failure"/> Failure</a></li>
    <li><a><input type="checkbox" value="Wounds"/>  Wounds</a></li>
    <li><a><input type="checkbox" value="Afib"/> Afib</a></li>
</ul>
<ul class="new-lists">
   <li>
</ul>
<button id="apply">Apply</button>

if you want to remove unchecked values use this code snippet

var carvalue = [];
function questionCount() {
  $.each($('input[type="checkbox"]'), function () {
    var value = $(this).val();
    if(this.checked){
      if(carvalue.indexOf(value)==-1) 
          carvalue.push(value);
    }else{
      if(carvalue.indexOf(value)>-1)
          carvalue.splice(carvalue.indexOf(value), 1);
    }
  });
  var json = JSON.stringify(carvalue);
  var obj = JSON.parse(json);
  $('.new-lists li').html(obj);
}

$(document).ready(function () {
  $('#apply').click(function () {
    questionCount();
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="care-ul">
    <li><a><input type="checkbox" value="Disease" /> Disease</a></li>
    <li><a><input type="checkbox" value="Failure"/> Failure</a></li>
    <li><a><input type="checkbox" value="Wounds"/>  Wounds</a></li>
    <li><a><input type="checkbox" value="Afib"/> Afib</a></li>
</ul>
<ul class="new-lists">
   <li>
</ul>
<button id="apply">Apply</button>

Upvotes: 0

gurvinder372
gurvinder372

Reputation: 68393

you just need to intialize carevalue array in the questionCount method everytime rather than only intializing it outside.

function questionCount() {

    carevalue = []; //now it will lose initial values so only new unique values will be coming
    $.each($('input[type="checkbox"]:checked'), function () {
        var value = $(this).val();
        carevalue.push(value);
    });           

    var json = JSON.stringify(carevalue);
    var obj = JSON.parse(json);
    $('.new-lists li').html(obj);
}

Upvotes: 2

Related Questions