Question

我第一次使用jQuery（我的js知识最好）并尝试创建一个基于复选框选项的Section过滤器（隐藏/显示div，具体取决于类）。

首先，我想要检索已检查的每个复选框的类，所以我有类似的东西（div.text只是为了测试输出）。每个复选框类对应于div的类（所有div都有多个匹配各种复选框的类）

<ul>
    <li>Size</li>
    <li><input type="checkbox" class="half" />&frac12;"</li>
    <li><input type="checkbox" class="quart" />&frac34;"</li>
</ul>

<script>
    function Checked() {
        var n = $("input:checked").attr("class");
        $("div.text").text(n);
    }

    Checked();
    $(":checkbox").click(Checked);
</script>

这成功地返回了第一个已选中的复选框类，我玩弄了每个（）但不太明白如何实现它，有人能指出我正确的方向吗？

最终我正在寻找每个已检查的复选框类在一个数组中，然后我可以调用它来使相应的div成为唯一可见的项目，但我很高兴一次采取这一步骤。我相信这可能是一种更容易实现预期结果的方法，所以我也愿意接受建议。提前致谢

Answer 1

试试这个

function Checked() {
  var classes = [];
  $("input:checked").each(function(){
       classes.push($(this).attr('class'));
  });
  $("div.text").text(classes.join(','));
}
Checked();
$(":checkbox").click(Checked);

每个循环this内部指向每个选中的复选框元素。使用this我们获取类，然后将其推入数组中以存储所有类，然后使用数组的join方法显示它们。

Answer 2

试试这个：

function Checked() {
    return $("input:checked").map(function() {
        return $(this).attr("class");
    }).get();
}

function showDivs() {
    var foo = Checked();
    // hide/show divs based on the array returned from the above function
}

showDivs();
$(":checkbox").click(showDivs);

Answer 3

您可能需要考虑.each()函数，因为jQuery集合中可能包含多个项目：

var classString;
$("input:checked").each(function(){
    classString += $(this).attr("class") + " "
});

$("div.text").text(classString);

Answer 4

如果您希望使用复选框打开/关闭可见项目，可以使用此模式：

HTML：

<input type="checkbox" class="half" />&frac12;"
<div class="T_half" style="display:none">...</div>

JS：

$("input:checkbox").click(function() {
        $("T_"+$(this).attr("class")).toggle()
})

Answer 5

这是一种方法。

<ul>
  <li>Size</li>
  <li><input type="checkbox" class="half" />&frac12;"</li>
  <li><input type="checkbox" class="quart" />&frac34;"</li>
</ul>

<p>Results</p>
<div id="output"><div>

<script>
function Checked() {
    var classes = [];

    // this will be a bit different maybe per the markup
    // though it uses the each function to loop through and
    // get the class of each check element in the selector
    $('ul li input:checked').each(function(index) {
        classes.push($(this).attr('class'));
    });

    // ... do something ...
    // for now just update the #output html with the classes array content
    $('#output').html(classes.join(', '));
}

Checked();

$(":checkbox").click(Checked);
</script>

如何检查每个选中的复选框时如何使用jQuery返回类？

5 个答案: