选中复选框时的增量变量

Increvement var when checkbox is selected

本文关键字：变量 复选框      更新时间：2023-09-26

我有这个数组 

var sizes =[
            ['300x250', 0],
            ['160x600', 0],
            ['728x90', 0],
            ['300x600', 0] 
        ];

我有很多复选框，我希望当我选择一个增量时，如果我取消选择，则递减该值。

直到现在我有这个

var $checkboxes = $('#addA td input[type="checkbox"]');
    $checkboxes.change(function () {
    var checkedValue = document.querySelector('.checkbox:checked').value;
                    var ss = $(this).attr('value').split('_')[0];
                    console.log(ss);
     });
});

我使用了拆分，因为大小在复选框值上。

所以，我选中值="300x250_aaaaaa"的复选框，我将值增加到1我选中另一个值 ="300x250_fdsfds" 的复选框，我递增该值，因此我总共有 2 个。我选中另一个值为="300x600_fdsssfds"的复选框，我将值递增为1。如果我取消选择，我必须减少。有了这个例子，我的最终数组应该是这样的：

var sizes =[
                ['300x250', 2],
                ['160x600', 0],
                ['728x90', 0],
                ['300x600', 1] 
            ];

在数组上我有所有可能的值我的表格

<table id="add-a" class="ad dataTable no-footer" style="width: 1500px;" role="grid">
<thead>
  <tr role="row">
<th align="" class="sorting_asc" tabindex="0" aria-controls="add-a" rowspan="1" colspan="1" aria-sort="ascending" aria-label="Add?: activate to sort column descending" style="width: 59px;">Add?</th>
<th align="" class="center sorting" tabindex="0" aria-controls="add-a" rowspan="1" colspan="1" aria-label="ID: activate to sort column ascending" style="width: 94px;"> ID</th>
<th align="" class="center sorting" tabindex="0" aria-controls="add-a" rowspan="1" colspan="1" aria-label="Size: activate to sort column ascending" style="width: 247px;">Size</th>
</tr>
</thead>
<tbody>
<tr role="row" class="odd">
    <td align="left" class="sorting_1"><b><p style="text-align: center;"><input type="checkbox" id="check_7a53936d" class="checkbox" name="checkbox[]" value="300x250_zzzzz" class="r1"></p></b></td>
    <td align="left" class="center">1</td>
    <td align="left" class="center">300x250</td>
  </tr><tr role="row" class="even" style="background: navajowhite;">
    <td align="left" class="sorting_1"><b><p style="text-align: center;"><input type="checkbox" id="check_fd6cb3e4" class="checkbox" name="checkbox[]" value="300x250_aaaa" class="r1"></p></b></td>
    <td align="left" class="center">2</td>
    <td align="left" class="center">300x250</td>
  </tr><tr role="row" class="odd">
    <td align="left" class="sorting_1"><b><p style="text-align: center;"><input type="checkbox" id="check_503dd438" class="checkbox" name="checkbox[]" value="300x250_bbbb" class="r1"></p></b></td>
    <td align="left" class="center">3</td>
    <td align="left" class="center">300x250</td>
  </tr><tr role="row" class="even">
    <td align="left" class="sorting_1"><b><p style="text-align: center;"><input type="checkbox" id="check_d68b36ad" class="checkbox" name="checkbox[]" value="300x250_cccc" class="r1"></p></b></td>
    <td align="left" class="center">4</td>
    <td align="left" class="center">300x250</td>
  </tr><tr role="row" class="odd">
    <td align="left" class="sorting_1"><b><p style="text-align: center;"><input type="checkbox" id="check_dd7ff4ea" class="checkbox" name="checkbox[]" value="300x250_dddd" class="r1"></p></b></td>
    <td align="left" class="center">5</td>
    <td align="left" class="center">300x250</td>
  </tr><tr role="row" class="even">
    <td align="left" class="sorting_1"><b><p style="text-align: center;"><input type="checkbox" id="check_456f96f3" class="checkbox" name="checkbox[]" value="300x250_eeee" class="r1"></p></b></td>
    <td align="left" class="center">6</td>
    <td align="left" class="center">300x250</td>
  </tr><tr role="row" class="odd">
    <td align="left" class="sorting_1"><b><p style="text-align: center;"><input type="checkbox" id="check_09c16d50" class="checkbox" name="checkbox[]" value="300x250_ffff" class="r1"></p></b></td>
    <td align="left" class="center">7</td>
    <td align="left" class="center">300x250</td>
  </tr></tbody>

为什么不使用对象？

var sizes={
 320x200: 0
}

然后，您可以使用以下内容将其递增：

var ss = $(this).attr('value').split('_')[0];
sizes[ss] += 1;
你应该

使用Object而不是数组，而不是使用value.split，你可以使用data tag（data-value="320x200"）。

以下是描述相同的代码。

JSFiddle

var data = {
  '300x250': 0,
  '160x600': 0,
  '728x90': 0,
  '300x600': 0
}
function createCheckBoxes() {
  var _testKeys = ["a", "b", "c", "d"];
  var html = "";
  var keys = Object.keys(data)
  _testKeys.forEach(function(item) {
    html += "<div class='group'>";
    html += "<h3>" + item.toUpperCase() + "</h3>"
    for (var i = 0; i < keys.length; i++) {
      html += "<input type='checkbox' data-value='" +
        keys[i] + "' class='chk' value=" + keys[i] + "_" + item + "/>" + keys[i];
    }
    html += "</div>"
  });
  $("#content").html(html);
}
function registerEvents() {
  // $(".checkbox").on("change", function() {   // With your html
  $(".chk").on("change", function() {
    
    // Consider only increment operation and set -ve value to decrement.
    var value = $(this).is(":checked") ? 1 : -1;
    
    // You can use you "value.split()" if not comfortable with data-value
    var key = $(this).data("value");
    console.log(key, value);
    
    // Update Value
    data[key] += value;
    printData();
  });
}
function printData() {
  $("#result").html(JSON.stringify(data, " ", 4));
}
createCheckBoxes();
registerEvents();
.group {
  margin: 5px;
  padding-left: 10px;
  border: 1px solid gray;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="result"></div>
<div id="content"></div>

相关文章：