Reputation: 13
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
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
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