Question

这是下面的代码没有按预期工作。我的意思是，在这个树视图中，当我按下最后4个复选框时，应该自动检查第一个复选框。每当子级复选框['checkboxG2']计数变为4时，应自动选择第一级['checkboxG1']。有什么帮助吗？

<html>
<head></head>
<body>
<div id="BuCheck" class="BusinessCont">
<p><input type="checkbox" name="checkboxG1" id="checkbox1" class="form-checkbox" value="Trauva"/><label for="checkbox1" class="form-label">Trauva</label></p>
    <p>&#x00A0;&#x00A0;&#x00A0;<input type="checkbox" name="checkboxG2" id="checkbox2" class="form-checkbox" value="Nitro"/><label for="checkbox2" class="form-label">Nitro</label></p>
    <p>&#x00A0;&#x00A0;&#x00A0;<input type="checkbox" name="checkboxG2" id="checkbox3" class="form-checkbox" value="Global Market"/><label for="checkbox3" class="form-label">Global Market</label></p>
    <p>&#x00A0;&#x00A0;&#x00A0;<input type="checkbox" name="checkboxG2" id="checkbox4" class="form-checkbox" value="Government Services"/><label for="checkbox4" class="form-label">Government Services</label></p>
    <p>&#x00A0;&#x00A0;&#x00A0;<input type="checkbox" name="checkboxG2" id="checkbox5" class="form-checkbox" value="PHASIZE"/><label for="checkbox5" class="form-label">PHASIZE</label></p>
    </div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
var checkBoxBusiness = function(){
console.log("Checkbox button clickes");
var myChekall = $("#BuCheck input[name=checkboxG2]"), myChecksin = $("#BuCheck input[name=checkboxG1]")[0], myCheckedAll=$("#BuCheck input[name=checkboxG2]:checked");
console.log(myCheckedAll.length);
if(myChekall.length == myCheckedAll.length) {
$(myChecksin).attr("checked", "true");
}
}
checkBoxBusiness();
</script>   
</body>
</html>

Answer 1

尝试更改此部分

checkBoxBusiness();

到

$("#BuCheck input[name=checkboxG2]").on('change', checkBoxBusiness);

请参阅fiddle。

编辑：

我已经修改了我的代码。现在，当取消选中所有次级复选框时，它可以取消选中主复选框：

 var checkBoxBusiness = function(){
    console.log("Checkbox button clickes");
    var myChekall = $("#BuCheck input[name=checkboxG2]"), 
        myChecksin = $("#BuCheck input[name=checkboxG1]"), 
        myCheckedAll=$("#BuCheck input[name=checkboxG2]:checked");
    console.log(myCheckedAll.length);

    if(myChekall.length == myCheckedAll.length) {
        myChecksin.prop('checked', true);
    } else if(!myCheckedAll.length) {
        myChecksin.prop('checked', false);
    }
}
$("#BuCheck input[name=checkboxG2]").on('change', checkBoxBusiness);

新demo。

Answer 2

如果您想要其他选项，请访问：

$(document).ready(function () {
    $("[name='checkboxG2']").on("click", function () {
        if ($("[name='checkboxG2']:checked").length == 4) {
            $("[name='checkboxG1']").prop('checked', true);
        }
    })
})

示例：http://jsfiddle.net/af8h9e6r/1/

复选框树视图功能不起作用

2 个答案: