Question

如何在此代码中停止重复值

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

Answer 1

您每次只需要在carevalue方法中初始化questionCount数组，而不是仅在外部初始化它。

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

Answer 2

使用indexOf测试是否已将值添加到数组中：这是一个有用的代码片段

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>

如果您想删除未经检查的值使用此代码段

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>

如何在此代码中停止重复值

2 个答案: