Question

我希望每次用户使用Jquery或javascript单击其中一个复选框时，都会在数组中动态获得所有选中的复选框。 PS：我使用Django + Python生成选项，并使用Bootstrap设置样式这是我的代码：

{% for option in options %}
    <div class="input-group" style="margin-bottom: 7px;">
        <div class="input-group-prepend">
            <div class="input-group-text">
                <input type="checkbox" name="checks[]" aria-label="Radio button for following text input" id="option_choice" class="ipad_pro" value="{{ option.name }}" onclick="getCheckedCheckboxes('option_choice')">
            </div>
        </div>
        <input style="background-color: #fff;" type="text" class="form-control" disabled=True value="{{ option.name }} {{ option.price }}€" aria-label="Text input with radio button">
    </div>
{% endfor %}

到目前为止，我已经尝试这样做：

function getCheckedBoxes(chkboxId) {
  var checkboxes = document.querySelectorAll('#' + chkboxId);
  var checkboxesChecked = [];
  for (var i=0; i<checkboxes.length; i++) {
     if (checkboxes[i].checked) {
        checkboxesChecked.push(checkboxes[i]);
     }
  }
  return checkboxesChecked.length > 0 ? checkboxesChecked : null;
}
var checkedBoxes = getCheckedBoxes("option_choice");

但这对我来说还没有解决。

如果您知道我的问题的答案，请帮助我。

Answer 1

jQuery $（'input [type = checkbox]：checked'）

使用：checked选择器

https://api.jquery.com/checked-selector/

Answer 2

<input type="checkbox" name="checks[]" aria-label="Radio button for following text input" id="option_choice" class="ipad_pro" value="{{ option.name }}"
       onclick="getCheckedCheckboxes('option_choice')">

您试图在getCheckedCheckboxes方法上绑定单击处理程序，但是函数名称为getCheckedBoxes，因此单击该元素将不会运行该方法。

Answer 3

使用JS获取所有选中的复选框输入：

var checked = document.querySelectorAll("input[type=checkbox]:checked");

获取所有选中的复选框javascript或jquery

3 个答案: