Question

如何计算＆＃34;选择＆＃34;属性的元素数量？如果所选属性是在点击动态添加的？

以下是我添加＆＃34;所选＆＃34;的方法。属性：

    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');
}

这会记录点击功能，但不在其外部。那我该怎么说呢？

如果所有元素都已选择＆＃34;＆＃34; attr {做东西}？

显然，我无法在点击内执行此操作，因为$ el指向＆＃34;此＆＃34;。

我们非常感谢您提供的任何帮助或建议。

由于

Answer 1

由于$li指的是整个列表，只需比较有selected属性的数量：

var totalElems = $li.length;
var selectedElems = $('.swrt_checkbox_button[selected]').length;

if (totalElems == selectedElems) {
    //All selected
}

你可以在click事件结束时加上这个，所以每次都会运行。

Answer 2

激活选择后，您可以在点击的ewnd上添加一条线。只需检查是否有任何未选择的元素，如果没有，则运行您需要的任何内容。

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

这是一个快速实施：

＆＃13;

$('li').click(function(e){
  e.preventDefault();
  $(this).toggleClass('selected');
  if(!$('li:not(.selected)').length) alert('all are selected')
})

＆＃13;

li {
display: block; widht: 100px; height: 100px;l
}
li.selected { background: red; }

＆＃13;

<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>

＆＃13;

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

Answer 3

我就是这样做的：

$("#sel").click(function () {
    $("input:not(:checked)").first().prop("checked", "checked");

    if ($("input[type='checkbox']").length == $("input[type='checkbox']:checked").length) {
        alert("All selected :)");
    }
});

Here is the JSFiddle demo

Answer 4

感谢所有评论的人。以下是我使用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();

可能更清洁，但它的工作原理谢谢！

计算jQuery中所选元素的数量

4 个答案: