使用jQuery匹配值后，如何删除复选框

Question

我有4个复选框，如果我选择了1个复选框，那么我将获得1个或更多的子值，如果我选择了第二个复选框，那么我将获得1个或更多的子值，我的问题是如果我取消选中的第一个复选框，那么我必须删除未使用第二复选框值的未选中的复选框值((。

$('.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>

Answer 1

• 您可以将汽车变量构造为对象。使用复选框值为键。
• 使用change作为事件
• 使用$('.search-box1:checked')选择器获取所有检查的.search-box1并使用map通过对象循环。
• 使用join()将数组变成字符串(逗号分隔(。

$('.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>