Question

所以我想要做的是创建一个主复选框，它将选择所有并取消选中所有。我发现这个jquery snipt比我创建的更好。

$("#checkboxSort").live( 'change', function() {
  $(".apply-single").attr( 'checked', $( this ).is( ':checked' ) ? 'checked' : '' );
});

我的问题是这一节到底是什么意思：

$( this ).is( ':checked' ) ? 'checked' : ''

我理解“这个”是“.apply-single”并且验证它是否被“检查”但是该部分的其余部分是什么意思...用英语？我对它的含义有所了解，但我更倾向于听到有人知道而不是我的猜测。

感谢任何人可以提供的帮助。

Answer 1

这称为三元运算符。一般格式是

[boolean expression] ? [expression A] : [expression B]

如果布尔表达式求值为true，则求值为表达式A;如果布尔表达式求值为false，则求值为表达式B.

Answer 2

我理解“这个”是“.apply-single”

不。 this实际上是指#checkboxSort元素。

?是JavaScript中的conditional operator。

您询问的特定代码意味着（伪代码）：

if the element with ID "checkboxSort" is checked:
    check all elements with class "apply-single"
else:
    uncheck all elements with class "apply-single"

简而言之，整个代码段都是这样做的：

侦听ID为checkboxSort的元素的更改。
当这样的change事件触发时，将具有类checked的所有元素的apply-single状态设置为checked元素的新#checkboxSort状态。

无耻的自我推销：我制作了一个小小的jQuery插件来处理这个问题。 Check it out

Answer 3

this实际上是#checkboxSort上下文而不是 .apply-single。因此，它将所有.apply-single设置为#checkboxSort的已检查属性。

这是ternary operator。与if语句类似，只需内联。

Answer 4

这是

的简短形式

if($(".apply-single").is(':checked')) {
    $(".apply-single").attr("checked", "checked");
} else {
     $(".apply-single").attr("checked", "");
}

Answer 5

这一行使用的三元运算符如下：

  <condition>?<consequent>:<alternative>

因此$( this ).is( ':checked'是您返回true或false的条件，具体取决于是否选中了复选框。如果为true，则'checked'成为属性，否则''成为属性。

Answer 6

在英语中，您询问的代码是，如果选中此项，则将CSS类为“apply-single”的所有HTML元素的“checked”属性设置为“checked” - 如果不是，然后将其设置为空值。

但是请确认实际结果不会导致checked =“”的属性。

对于复选框，未检查的状态不是由checked =“”表示，而是表示没有检查属性。

Answer 7

.live（）已弃用。请改用.on（）。

请检查：http://jsfiddle.net/loginet/Rdc5r/

$(document).ready(function () {

    $("#checkboxSort").on('click', function () {
        $(".apply-single").prop("checked", $("#checkboxSort").prop("checked"));
    });

    $('.apply-single').on('click', function () {
        var total = $('input:not(#checkboxSort)').length;
        var checked = $('input:not(#checkboxSort):checked').length;         
        if (total == checked) {
            $('#checkboxSort').prop('checked', true);
        } else if (total > checked || checked == 0) {
            $('#checkboxSort').prop('checked', false);
        } 
    });    
});

和HTML：

<p>
    <input type="checkbox" id="checkboxSort" />Check/Uncheck All</p>
<hr/>
<p id="p">
    <input type="checkbox" class="apply-single" />Checkbox 1
    <input type="checkbox" class="apply-single" />Checkbox 2
    <input type="checkbox" class="apply-single" />Checkbox 3
</p>

使用jquery检查所有/取消选中所有复选框

7 个答案: