Question

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

然后是Javascript：

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


}
});

// Show and Hide Class 1, 2 & 3 

$(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"));
    });

if (sum >= 1 && sum < 3) {
    ( $("#class1").show());}
else { ( $("#class1").hide())}  
} 
});

$(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"));
    });

if (sum >= 3 && sum < 9) {
    ( $("#class2").show());}
else { ( $("#class2").hide())}  
} 
});

$(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"));
    });

if (sum >= 9 ) {
    ( $("#class3").show());}
else { ( $("#class3").hide())}  
} 
});

Answer 1

请检查一下。我不清楚你的问题。可能对您的确切需求有所帮助。请告诉我。感谢。

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

Answer 2

以下是您尝试实现的更为简洁的版本：

<强>使用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);
    });
});

请在此处查看：http://jsfiddle.net/rcz8F/

我在这里使用了你的确切html。

所以，这是你发生的事情的细分。我将逐行解释发生了什么。

首先，等到DOM加载完毕。

然后隐藏所有div（如果您愿意，可以将其链接到特定的选择器）

为所有复选框添加事件处理程序

定义变量“count”

遍历每个复选框

如果已选中，则将1添加到count，否则添加0

隐藏所有div的

如果计数在1和2之间，则显示class1 div和它的父级（因为它嵌套在另一个div中）

如果计数在3到8之间，则显示class2 div及其父级

如果计数在9到25之间，则显示class3 div及其父级

否则，什么都不做

更新TotalCheckedid元素。

这就是它的全部。这可以根据您的应用需要轻松更改，而且只有15行代码。

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

2 个答案: