Question

我无法获取所有选中的复选框的值。这些复选框位于div内部的列表中。如下所示：

<div id="accDC">
     <ul id="chkDC">
         <li><a href="javascript:void(0);">
               <label class="checkbox">
                 <input id="9" type="checkbox" value="9">  Brazil </input>
               </label>
              </a></li>
          <li class="active"><a href="javascript:void(0);">
               <label class="checkbox">
                 <input id="14" type="checkbox" value="14">  Germany </input>
               </label>
              </a></li>
       </ul>
  </div>

当我尝试这样做时：

$('#chkDC input:checkbox').on('change', function () {
                          getAllValue()
                      });

getAllValue返回字符串，实际上是逗号分隔值：

function getAllValue() {
                 var sThisVal = '';
                 $('#chkDC input:checkbox').each(function () {
                     sThisVal = sThisVal + (this.checked ? $(this).val() : "") + ',';
                 });
                 alert(sThisVal);
             }

目前此警报类似于：，9 ,,,,, 14，，18，这是显而易见的，因为每个复选框选择更改事件都会调用getAllValue。

我怎样才能将其称为＆lt; li> class ='。active'的元素？

下面似乎没有用，我试过了：

$('#accDC > li.active > input:checkbox').on('change', function () {
                 alert('new selector');
                 getAllValue()
             });

附加信息：此复选框列表包含许多我正在动态构建的项目。

Answer 1

尝试，

事件绑定应该是这样的，

$('#chkDC li.active :checkbox').on('change', getAllValue);

getAllValue函数应为

function getAllValue() {
  var values = $('#chkDC li.active :checkbox:checked').map(function () {
      return this.value; 
  }).get().join(); //9,12, ... return values of checked check boxes 
}

Answer 2

复选框的正确选择器是：

$('input[type="checkbox"]');

如果你想要检查的那些：

$('input[type="checkbox"]:checked');

Answer 3

点击li.active绑定，尝试以下代码;使用 :checked 伪选择器

$('#chkDC li.active input:checkbox').on('change', function () {
    getAllValue()
});

function getAllValue() {
    var sThisVal = $('#chkDC :checkbox:checked').map(function () {
        return this.value;
    }).get();
    alert(sThisVal);
}

<强> Demo

Answer 4

由于 #accDc 没有直接的孩子 li 而 li 没有复选框直接孩子，你需要应用以下选择器：

将其更改为：

$('#accDC li.active input:checkbox').on('change', function () {
                 alert('new selector');
                 getAllValue()
             });

Answer 5

您的JQuery“ on ”函数在以下代码中的语法错误：

$('#accDC > li.active > input:checkbox').on('change', function () {
                 alert('new selector');
                 getAllValue()
             });

语法应为

.on（events [，selector] [，data]，handler）

阅读活动文档以供参考。

http://api.jquery.com/on/

请尝试以下代码。

$('#chkDC > li.active').on('change','input[type=checkbox]', function () {
                 alert('new selector');
                 getAllValue()
             });

包含在div中的元素的jQuery选择器

5 个答案: