How to remove checkboxes after matching values using jQuery?

Question

I have 4 checkboxes if I select 1 check box then I will get 1 or more sub values and if I select 2nd check box then I will get 1 or more sub values Here My Problem is If I uncheck the 1st check box then I have to remove unchecked check box values not with second check box values().

$('.search-box1').on("click", function(e) {

  var inputVal1 = $(this).val();
  var cars = ["Saab", " Volvo", " BMW", " ABC", " HONDA", " TVS"];
  $(".arrVal").html(cars);

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<div class="row">
  <div>
    <label>First Page</label>
    <input type="checkbox" name="txtCheck" id="txtCheck" class="search-box1" value="First Page">
  </div>

  <div>
    <label>Second Page</label>
    <input type="checkbox" name="txtCheck" id="txtCheck" class="search-box1" value="Second Page">
  </div>

  <div>
    <label>Third Page</label>
    <input type="checkbox" name="txtCheck" id="txtCheck" class="search-box1" value="Third Page">
  </div>

  <div>
    <label>Fourth Page</label>
    <input type="checkbox" name="txtCheck" id="txtCheck" class="search-box1" value="Fourth Page">
  </div>
</div>

<div class="arrVal"></div>

Can you please explain more or give examples of what you are trying to achieve. And also post your existing js code. — Eddie
– Eddie, Commented May 22, 2019 at 10:01
Edited. What are you trying to achieve exactly? You want to show the value of selected checkboxes on #arrVal ? :) — Eddie
– Eddie, Commented May 22, 2019 at 10:09
For Example First Checkbox associated with array values "Saab", "Volvo", "BMW" and second check box associated with "ABC", "HONDA", "TVS" If I select First Check box I will Get "Saab", "Volvo", "BMW" and If Select Second Check box I will Get "ABC", "HONDA", "TVS" along with First checkbox values... Now My problem is If I uncheck second check box I should preserve first check box values but that is happening. — Samson
– Samson, Commented May 22, 2019 at 10:13

Eddie · Accepted Answer · 2019-05-22 10:23:07Z

2

You can construct your cars variable as object. Using the checkbox value as key.
Use change as event
Use $('.search-box1:checked') selector to get all checked .search-box1 and use map to loop thru the objects.
Use join() to make the array into a string(comma seperated).

$('.search-box1').on("change", function(e) {

  var inputVal1 = $(this).val();
  var cars = {
    value1: ["Saab", "Volvo", "BMW"],
    value2: ["ABC", "HONDA", "TVS"],
    value3: [],
    value4: [],
    value5: [],
  }

  var result = $('.search-box1:checked').map(function() {
    return cars[this.value] || [];
  }).get();

  $(".arrVal").html(result.join());

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<div class="row">
  <div>
    <label>First Page</label>
    <input type="checkbox" name="txtCheck" id="txtCheck" class="search-box1" value="value1">
  </div>

  <div>
    <label>Second Page</label>
    <input type="checkbox" name="txtCheck" id="txtCheck" class="search-box1" value="value2">
  </div>

  <div>
    <label>Third Page</label>
    <input type="checkbox" name="txtCheck" id="txtCheck" class="search-box1" value="value3">
  </div>

  <div>
    <label>Fourth Page</label>
    <input type="checkbox" name="txtCheck" id="txtCheck" class="search-box1" value="value4">
  </div>
</div>

<div class="arrVal"></div>

answered May 22, 2019 at 10:23

Eddie

26.8k6 gold badges39 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Samson Over a year ago

In this I am getting Live data from database that means dynamic values.

Eddie Over a year ago

Thats so broad. You have to give details. :)

Collectives™ on Stack Overflow

How to remove checkboxes after matching values using jQuery?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related