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

Checkbox treeview functionality is not working

本文关键字：不起作用 功能 视图 复选框      更新时间：2023-09-26

下面的代码没有按预期工作。我的意思是，在这个树视图中，当我按下最后4个复选框时，第一个复选框应该会自动选中。每当子级别复选框[复选框G2’]计数达到4时，应自动选择第一级别[复选框G1’]。请帮忙吗？

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

尝试更改此部件

checkBoxBusiness();

至

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

见小提琴。

编辑：

我的代码已被修改。现在，当所有子级别复选框都未选中时，它可以取消选中主复选框：

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

新演示。

如果你想在这里找到另一个选项，你可以去：

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

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

相关文章：