Question

我正在尝试使用jQuery在无序列表中获取ListItems的值。下面的代码接近工作，但它总是返回第一个ListItem的值，即使检查第二个也是如此。

$(document).ready(function() {
    $("li").click(function() {
        $("input:checked").each(function() {
            alert($("label").attr('InnerText'));
        });
    });
});

<div> 
    <ul class="AspNet-CheckBoxList-RepeatDirection-Vertical">
        <li class="AspNet-CheckBoxList-Item">
            <input id="CheckBoxList1_0" type="checkbox" name="CheckBoxList1$0"  value="first1" />
            <label for="CheckBoxList1_0">First $30.00</label>
        </li>
        <li class="AspNet-CheckBoxList-Item">
            <input id="CheckBoxList1_1" type="checkbox" name="CheckBoxList1$1" value="second2" />
            <label for="CheckBoxList1_1">Second $25.00</label>
        </li>
     </ul>
</div>

Answer 1

<强> Demo Fiddle

使用.text()代替.attr('innerText') - innerText是javascript对象的属性，无法使用.attr()。
使用$(this).next('label')将相关标签添加到复选框。在.each() - $(this)中，我们点击了checkbox和 NOT li。

$("input:checked").each(function() {
      alert($(this).next('label').text());
});

Answer 2

目前，$("label")匹配页面上的所有标签（与$("input:checked")相同）

您可能需要尝试以下操作，将选择器限制为仅限当前匹配的li的子项：

$(document).ready(function() {
    $("li").click(function() {
        $("input:checked", $(this)).each($.proxy(function() {
            alert($("label", $(this)).attr('InnerText'));
        }, this));
    });
});

另外，我没有看到InnerText属性。你确定那不应该只是.text()吗？

Answer 3

希望这有帮助

$(document).ready(function() {
    $("li").click(function() {
        if ($(this).find("input:checked")) {
            alert($(this).find("label").text());
        }
    });
});

干杯！

Answer 4

要使其正常工作，只需按以下步骤更改代码

$("li").click(function() {
    $("input:checked").siblings('label').each(function() {
        alert($(this).text());
    });
});

siblings()方法获取input:checked的兄弟，在这种情况下，您标记

工作示例为here

如何使用jQueryUI获取listitem

4 个答案: