CODEWITHSUNDEEP
javascriptjquerycheckbox
coder12349
coder12349

Reputation: 491

Not able to remove values from array after uncheck in checkboxes

I have a requirement where all the checked values in checkboxes should be displayed in a textarea. This part works perfectly fine, but the problem occurs when I uncheck the checkbox unchecked element is not getting removed from the array. I have used jquery each function as shown in double quotes.

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

As per my understanding, the above function will check for only checked values and updates into the array, so if any value is unchecked and this function is called, the unchecked value should be removed isn't it?

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>

The above snippet highlights the issue,where if i uncheck any checkbox,the value is not getting removed from array. Please correct me if i am doing anything wrong? Please help me! Thanks in advance

Upvotes: 3

Views: 1270

Answers (2)

user8897421
user8897421

Reputation:

Move the array to inside the function, otherwise you're accumulating all the values from all previous clicks.

And in fact, .map() would be nicer than .each() so that you build the array while iterating. And you don't need the $.unique operation, which I assume was an attempt at a solution.

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>

And here's a native JS solution.

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>

Upvotes: 2

Kalaiselvan
Kalaiselvan

Reputation: 2134

it could be helpful to you what I had changed here is the variable creation var pc=[] inside the 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>

Upvotes: 4

Related Questions