Question

我要求复选框中的所有选中值都应显示在textarea中。这部分工作得非常好，但是当我取消选中复选框未选中的元素没有从数组中删除时会出现问题。我使用了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>

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

Answer 1

对我来说，我在这里所做的更改是var pc=[]

中的变量创建check()

 
    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>

Answer 2

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

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

2 个答案: