取消选中复选框后无法从数组中删除值答案

【问题标题】：Not able to remove values from array after uncheck in checkboxes取消选中复选框后无法从数组中删除值
【发布时间】：2017-12-01 05:17:03
【问题描述】：

我有一个要求，复选框中的所有选中值都应显示在文本区域中。这部分工作得很好，但是当我取消选中复选框未选中元素没有从数组中删除时，就会出现问题。我已经使用了 jquery 每个函数，如双引号所示。

$("input:checkbox[name=category]:checked").each(function() {

根据我的理解，上面的函数只会检查已检查的值并更新到数组中，所以如果任何值未检查并且调用此函数，则应该删除未检查的值不是吗？

var pc = [];
function check(){
$("input:checkbox[name=category]:checked").each(function(){
             pc.push(decodeURI($(this).val()));
    });
    	 pc = $.unique(pc);
    document.getElementById("result").value = pc.join("\n");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body onload ="check()">
<input type="checkbox" name="category" value="a/b" onclick="check()" checked>
<input type="checkbox" name="category" value="c/d" onclick="check()" checked>
<input type="checkbox" name="category" value="e/f" onclick="check()" checked>
<input type="checkbox" name="category" value="g/h" onclick="check()" >

<textarea id="result"></textarea>

上面的 sn-p 突出了这个问题，如果我取消选中任何复选框，则该值不会从数组中删除。如果我做错了什么，请纠正我？请帮我！提前致谢

【问题讨论】：

调用 check() 函数时清除 pc 数组值。

标签： javascript jquery checkbox

【解决方案1】：

我在这里更改的是check() 内的变量创建var pc=[] 可能对您有所帮助

 
    function check(){
        var pc = [];
        $("input:checkbox[name=category]:checked").each(function(){
                 pc.push(decodeURI($(this).val()));
        });
        pc = $.unique(pc);
        document.getElementById("result").value = pc.join("\n");
    }

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <body onload ="check()">
    <input type="checkbox" name="category" value="a/b" onclick="check()" checked>
    <input type="checkbox" name="category" value="c/d" onclick="check()" checked>
    <input type="checkbox" name="category" value="e/f" onclick="check()" checked>
    <input type="checkbox" name="category" value="g/h" onclick="check()" >

    <textarea id="result"></textarea>

【讨论】：

【解决方案2】：

将数组移动到函数内部，否则您将累积所有先前点击的所有值。

事实上，.map() 会比.each() 更好，这样您就可以在迭代时构建数组。而且您不需要$.unique 操作，我认为这是一种解决方案的尝试。

function check() {
  var pc = $("input:checkbox[name=category]:checked").map(function() {
    return decodeURI($(this).val());
  }).toArray();

  document.getElementById("result").value = pc.join("\n");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<body onload="check()">
  <input type="checkbox" name="category" value="a/b" onclick="check()" checked>
  <input type="checkbox" name="category" value="c/d" onclick="check()" checked>
  <input type="checkbox" name="category" value="e/f" onclick="check()" checked>
  <input type="checkbox" name="category" value="g/h" onclick="check()">

  <textarea id="result"></textarea>

这是一个原生 JS 解决方案。

function check() {
  const vals = Array.from(
    document.querySelectorAll("input[type=checkbox][name=category]:checked"),
    el => decodeURI(el.value)
  );

  document.getElementById("result").value = vals.join("\n");
}

<body onload="check()">
  <input type="checkbox" name="category" value="a/b" onclick="check()" checked>
  <input type="checkbox" name="category" value="c/d" onclick="check()" checked>
  <input type="checkbox" name="category" value="e/f" onclick="check()" checked>
  <input type="checkbox" name="category" value="g/h" onclick="check()">

  <textarea id="result"></textarea>

【讨论】：