Javascript 选中或取消选中复选框后才隐藏DIV_Javascript_Jquery_Html_Function_Checkbox

Javascript 选中或取消选中复选框后才隐藏DIV

javascript jquery html function checkbox

Javascript 选中或取消选中复选框后才隐藏DIV,javascript,jquery,html,function,checkbox,Javascript,Jquery,Html,Function,Checkbox,我是javascript的新手，所以请容忍我。我真的很感谢你的帮助。我有一张表格，我用它作为人们的评估考试。我有三个div，我希望它们根据选中的复选框数量隐藏或显示。问题是： 1。在选中复选框之前，div不会隐藏。Javascript没有使function=true或false的值 2。这是我的第一个javascript代码，非常凌乱和日志。如果有人能告诉我一种更简单的方法来完成我正在做的事情，我将不胜感激。 <input type="checkbox" name="checkbox1_0

我是javascript的新手，所以请容忍我。我真的很感谢你的帮助。我有一张表格，我用它作为人们的评估考试。我有三个div，我希望它们根据选中的复选框数量隐藏或显示。问题是：

1。在选中复选框之前，div不会隐藏。Javascript没有使function=true或false的值

2。这是我的第一个javascript代码，非常凌乱和日志。如果有人能告诉我一种更简单的方法来完成我正在做的事情，我将不胜感激。

<input type="checkbox" name="checkbox1_0" id="checkbox1_0" class="checkboxA" value="1" />
<label for="checkbox1_0"> Question 1 </label>

<input type="checkbox" name="checkbox1_1" id="checkbox1_1" class="checkboxA" value="1" />
<label for="checkbox1_1">Question 2</label>

<input type="checkbox" name="checkbox1_2" id="checkbox1_2" class="checkboxA" value="1" />
<label for="checkbox1_2">Question 3</label>

</fieldset>

<p>Total<input type="text" name"TotalChecked" id="TotalCheckedid" size"10" readonly="readonly"         /></p>
     </div>

   <div data-role="collapsibleset" data-theme="a" data-content-theme="a">
        <div class="class1")
        <div data-role="collapsible" class="class1" id="class1">
            <h3> Total 0 - 2 </h3>  
         </div>

    <div data-role="collapsible" class="class2" id="class2">
        <h3> Total 3 - 8 </h3>
        </div>

    <div data-role="collapsible"class="class3" id="class3">
    <h3> Total 9 - 25 </h3>
    </div>


问题1
问题2
问题3
总数
请检查一下这个。我不清楚你的问题。也许它会对你的确切需求有所帮助。请让我知道。谢谢
<!DOCTYPE HTML>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>        
$(document).ready(function(e) {
        $("input[type=checkbox]").change(function() {
        recalculate();
}); 

function recalculate() {
    var sum = 0;
    $("input[type=checkbox]:checked").each(function() {
    sum += parseInt($(this).attr("value"));
    });

// output

$("#TotalCheckedid").val(sum);
$('#checkbox1_0').click(function(){
    if (!$(this).is(':checked')) {
        $("#class1").show();
    }else{
        $("#class1").hide();
    }   
});
$('#checkbox1_1').click(function(){
    if (!$(this).is(':checked')) {
        $("#class2").show();
    }else{
        $("#class2").hide();
    }
});
$('#checkbox1_2').click(function(){
    if (!$(this).is(':checked')) {
        $("#class3").show();
    }else{
        $("#class3").hide();
    }
});

}  
});
</script>
</head>
<body> 
<input type="checkbox" name="checkbox1_0" id="checkbox1_0" class="checkboxA" value="1" />
<label for="checkbox1_0"> Question 1 </label>

<input type="checkbox" name="checkbox1_1" id="checkbox1_1" class="checkboxA" value="1" />
<label for="checkbox1_1">Question 2</label>

<input type="checkbox" name="checkbox1_2" id="checkbox1_2" class="checkboxA" value="1" />
<label for="checkbox1_2">Question 3</label>

</fieldset>

<p>Total<input type="text" name"TotalChecked" id="TotalCheckedid" size"10" readonly="readonly" /></p>
    <div data-role="collapsible" class="class1" id="class1">
        <h3> Total 0 - 2 </h3>  
     </div>

<div data-role="collapsible" class="class2" id="class2">
    <h3> Total 3 - 8 </h3>
    </div>

<div data-role="collapsible"class="class3" id="class3">
<h3> Total 9 - 25 </h3>
</div> 
</body>
</html>


$（文档）.ready（函数（e）{
$（“输入[type=checkbox]”）。更改（函数（）{
重新计算（）；
}); 
函数重新计算（）{
var总和=0；
$（“输入[类型=复选框]：选中”）。每个（函数（）{
sum+=parseInt（$（this.attr（“value”））；
});
//输出
$（“#totalcheckedd”）.val（总和）；
$（'#复选框1_0'）。单击（函数（）{
如果（！$（this）.is（':checked'））{
$（“#class1”）.show（）；
}否则{
$（“#class1”）.hide（）；
}   
});
$（'#复选框1_1'）。单击（函数（）{
如果（！$（this）.is（':checked'））{
$（“#类2”）.show（）；
}否则{
$（“#类2”）.hide（）；
}
});
$（'#复选框1_2'）。单击（函数（）{
如果（！$（this）.is（':checked'））{
$（“#class3”）.show（）；
}否则{
$（“#class3”）.hide（）；
}
});
}  
});
问题1
问题2
问题3
总数
总数0-2
总数3-8
总数9-25
以下是您试图实现的目标的一个更加精简的版本：
Javascript:
$(document).ready(function () {
    $("div").hide();
    $("input[type='checkbox']").click(function () {
        var count = 0;
        $("input[type='checkbox']").each(function () {
            count += $(this).is(":checked") ? 1 : 0;
        });
        $("div").hide();
        count > 0 && count < 3 ? $("#class1").show().parent().show()
        : count > 2 && count < 9 ? $("#class2").show().parent().show()
        : count > 8 && count < 26 ? $("#class3").show().parent().show()
        : false;
        $("#TotalCheckedid").val(count);
    });
});

$（文档）.ready（函数（）{
$（“div”）.hide（）；
$（“输入[type='checkbox']”）。单击（函数（）{
var计数=0；
$（“输入[type='checkbox']”）。每个（函数（）{
count+=$（this）.is（“：checked”）？1:0；
});
$（“div”）.hide（）；
计数>0&&count<3？$（“#class1”）.show（）.parent（）.show（）
：count>2&&count<9？$（“#class2”）.show（）.parent（）.show（）
：count>8&&count<26？$（“#class3”）.show（）.parent（）.show（）
：假；
$（“#totalcheckedd”）.val（计数）；
});
});

在这里查看：
我在这里使用了你的html
这是你对所发生事情的分析。我会逐行解释发生了什么
首先，等待DOM被加载
然后隐藏所有div（如果愿意，可以将其更改为特定选择器）
将事件处理程序添加到所有复选框中
定义一个变量“count”
循环检查每个复选框
如果选中，则将1添加到计数，否则添加0
隐藏所有的div
如果计数介于1和2之间，则显示class1 div及其父级（因为它嵌套在另一个div中）
如果计数介于3和8之间，则显示class2 div及其父级
如果计数介于9和25之间，则显示class3 div及其父级
否则，什么也不做
更新totalcheckedd元素
就这些。这可以根据应用程序的需要轻松更改，并且只需15行代码。
如果所有复选框都各添加1行，那么计算长度比迭代每个复选框要好。我的意思是，var sum=$（“input[type=checkbox]：checked”）。长度更多的问题，谢谢！我真的很感谢你的帮助。
$(document).ready(function () {
    $("div").hide();
    $("input[type='checkbox']").click(function () {
        var count = 0;
        $("input[type='checkbox']").each(function () {
            count += $(this).is(":checked") ? 1 : 0;
        });
        $("div").hide();
        count > 0 && count < 3 ? $("#class1").show().parent().show()
        : count > 2 && count < 9 ? $("#class2").show().parent().show()
        : count > 8 && count < 26 ? $("#class3").show().parent().show()
        : false;
        $("#TotalCheckedid").val(count);
    });
});