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

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/

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

Checkbox treeview functionality is not working

javascript

checkbox

treeview

jquery