计算jQuery中选定元素的数量

Count number of selected elements in jQuery

本文关键字：元素 jQuery 计算      更新时间：2023-09-26

如果selected属性是在单击时动态添加的，我将如何计算具有"selected"属性的元素的数量?

我是这样添加"selected"属性的:

    var $li = $('.swrt_checkbox_button');
    $li.on('click', function(){
        var $el = $(this);
        $el.toggleClass('checkbox-selected');
        $el.attr('selected', function(index, attr){
            return attr == "selected" ? null : "selected";
        });
    });

我想实现的是，如果所有元素都有选定的attr，那么我想做点什么，在这个例子中，禁用另一个UI元素。

我遇到的问题是，如果我检查attr是否在点击中被选中，它可以工作:

if($el.is("[selected]")) {
    console.log('yes');
}

该日志记录在click函数内，但不记录在click函数外。那么我怎么说:

如果所有元素都有"selected" attr {do stuff}?

显然我不能在点击中这样做，因为$el指向"this"。

如果您能提供任何帮助或建议，我将不胜感激。

谢谢

由于$li指的是整个列表，只需比较有多少具有selected属性:

var totalElems = $li.length;
var selectedElems = $('.swrt_checkbox_button[selected]').length;
if (totalElems == selectedElems) {
    //All selected
}

你可以把它放在你的click事件的末尾，这样它每次都会运行。

您可以在激活选择后，在单击结束处添加一个小行。只要检查是否有未选择的元素，如果没有，然后运行任何你需要的

// Check if there are any unselected left.
if(!$('.swrt_checkbox_button:not([selected])').length){
    // Do the all-are-selected thing
}

下面是一个快速实现:

$('li').click(function(e){
  e.preventDefault();
  $(this).toggleClass('selected');
  if(!$('li:not(.selected)').length) alert('all are selected')
})
li {
display: block; widht: 100px; height: 100px;l
}
li.selected { background: red; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

我不希望selected是不是一个应该在li元素上使用的道具。

我是这样做的:

$("#sel").click(function () {
    $("input:not(:checked)").first().prop("checked", "checked");
    if ($("input[type='checkbox']").length == $("input[type='checkbox']:checked").length) {
        alert("All selected :)");
    }
});

这里是JSFiddle演示

感谢所有评论的人。以下是我使用tymeJV的解决方案所做的工作:

function addCheck() {
    var $li = $('.swrt_checkbox_button');
    $li.on('click', function(){
        var $el = $(this);
        $el.toggleClass('checkbox-selected');
        $el.attr('selected', function(index, attr){
            return attr == "selected" ? null : "selected";
        });
        var totalElems = $li.length;
        var selectedElems = $('.swrt_checkbox_button[selected]').length;
        if (totalElems == selectedElems) {
            $('.checkboxes-btn').removeAttr("disabled");
        } else {
            $('.checkboxes-btn').attr("disabled", "disabled");
        }
    });     
}
addCheck();

可能可以更干净，但它的工作，所以谢谢!

相关文章：