チェックボックスのチェックを外した後に配列から値を削除できません

チェックボックスのチェックされたすべての値をテキストエリアに表示する必要があります。この部分は問題なく動作しますが、このチェックボックスをオフにすると、未チェックの要素が配列から削除されません。私は二重引用符で示されているように各関数をjqueryを使っています。チェックボックスのチェックを外した後に配列から値を削除できません

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

私の理解あたりとしては、上記の機能は、配列に値や更新を確認するためにチェックしますので、任意の値がチェックされていないと、この関数が呼び出された場合、削除する必要が未確認の値ではありませんそれ？

var pc = []; 
 
function check(){ 
 
$("input:checkbox[name=category]:checked").each(function(){ 
 
      pc.push(decodeURI($(this).val())); 
 
    }); 
 
    \t 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>

上記のスニペットは、私はすべてのチェックボックスのチェックを外した場合、値を配列から削除取得されていない問題を、強調しています。私は何か間違っていると私を修正してください？私を助けてください！ありがとうございます

出典

2017-12-01 coder12349

の内側にある明確なPCの配列値ときcall check（）関数。 –

配列を関数内に移動します。そうしないと、以前のすべてのクリックからのすべての値が累積されます。

実際、.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>

出典

2017-12-01 05:22:54

私がここで変更したものをあなたに役立つことができ、変数の作成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>

出典

2017-12-01 05:23:29

チェックボックスのチェックを外した後に配列から値を削除できません

答えて

関連する問題