Question

现在我有了这个表格

<ul>
<li>
    <label>
        <input name="INTERESTS" type="checkbox" value="a" id="all"><span>All items</span>
    </label>  
</li>
<li>
    <label>
        <input name="INTERESTS" type="checkbox" value="b" id="1"> <span>Item 1</span>
    </label>
</li>
<li>
    <label>
        <input name="INTERESTS" type="checkbox" value="c" id="2"> <span>Item 2</span>
    </label>
</li>
<li>
    <label>
        <input name="INTERESTS" type="checkbox" value="d" id="3"> <span>Item 3</span>
    </label>
</li>
<li>
    <label>
        <input name="INTERESTS" type="checkbox" value="e" id="4"> <span>Item 4</span>
    </label>
</li>  
</ul>

这个javascript

var $others = $('input[name="INTERESTS"]').not('#all')
$('#all').change(function () {
    if (this.checked) {
        $others.prop('checked', false)
    }
});
$others.change(function () {
    if (this.checked) {
        $('#all').prop('checked', false)
    }
})

Test it at jsfiddle

如果选中“所有项目”复选框，则取消选中其他项目。它工作得很好，但现在我需要选择所有项目（项目1到项目4），然后取消选择它们并仅选择“所有项目”复选框。有什么想法吗？

感谢!!!

Answer 1

这个怎么样？

var $others = $('input[name="INTERESTS"]').not('#all')
$('#all').change(function () {
    if (this.checked) {
        $others.prop('checked', false)
    }
});
$others.change(function () {
    if (this.checked) {
        $('#all').prop('checked', false)

        if( $('input[name="INTERESTS"]:checked').not('#all').length == $others.length){ // if checked inputs count equals to the input count
          $('input[name="INTERESTS"]').not('#all').prop('checked', false); // uncheck except "all" input
            $('#all').prop('checked', true) // check "all items"
        }
    }
})

fiddle result

希望有所帮助，

Answer 2

var check_box_1 = document.getElementById("1");
var check_box_2 = document.getElementById("2");
var check_box_3 = document.getElementById("3");
var check_box_4 = document.getElementById("4");
var check_box_all = document.getElementById("all");

function MyFunction(){
    if(check_box_1.checked && check_box_2.checked && check_box_3.checked && check_box_4.checked)
    {
       check_box_all.checked = true;

       check_box_1.checked = false;
       check_box_2.checked = false;
       check_box_3.checked = false;
       check_box_4.checked = false;
     }
}

然后，添加

onclick = "MyFunction()"

到你的1,2,3,4个复选框。

Answer 3

将其他复选框点击事件更改为此。

$others.change(function () {
        $('#all').prop('checked', $('input[name="INTERESTS"]:checked').not('#all').length == $others.length)
    });

如果选择了4个特定复选框，则取消选中它们并仅选择“所有项目”复选框

3 个答案: