使用javascript根据复选框选择显示和隐藏div

Question

嗨，我需要根据复选框选择隐藏和显示分区。 目前我必须显示和隐藏 10 个分区，并为此提供了 10 个复选框。 也应该有复选框选择所有这将检查所有复选框和所有 10 div 应显示。 一旦用户将单击全选，它现在应该更改为取消全选以取消全选。单击取消全选后，它将取消选择所有复选框，并且不应显示任何部门。 请为我提供 javascript 解决方案而不是 jquery。 这是代码

<html>
<head>
<script type="text/javascript">
var checkflag = "false";
function check(field) {
  if (checkflag == "false") {
    for (i = 0; i < field.length; i++) {
      field[i].checked = true;
    }
    checkflag = "true";
    return "Uncheck All";
  } else {
    for (i = 0; i < field.length; i++) {
      field[i].checked = false;
    }
    checkflag = "false";
    return "Check All";
  }
}

function ShowHideDiv(chkPassport) {
        var dvPassport = document.getElementById("dvPassport");
        dvPassport.style.display = chkPassport.checked ? "block" : "none";
    }

</script>
</head>
<body>
    <form name=myform action="" method=post>
        <table>
            <tr>
                <td><strong>Make a selection</strong><br> <input
                    type=checkbox name=list id="chkPassport"
                    onclick="ShowHideDiv(this)" value="1">Java<br> <input
                    type=checkbox name=list value="2">JavaScript<br> <input
                    type=checkbox name=list value="3">ASP<br> <input
                    type=checkbox name=list value="4">HTML<br> <input
                    type=checkbox name=list value="5">SQL<br> <br> <input
                    type=button value="Check All"
                    onClick="this.value=check(this.form.list)"></td>
            </tr>
        </table>
        <div id="dvPassport" style="display: none">
            Passport Number: <input type="text" id="txtPassportNumber" />
        </div>
    </form>
</body>
</html>

Answer 1

您可以通过以下 jQuery 代码执行此操作：

    $('.checkbox').click(function() {
     if( $(this).is(':checked')) {
        $("#yourdiv").show();
     } else {
        $("#yourdiv").hide();
     }
    });

将 #yourdiv - 和 .checkbox 更改为您的 CSS 标识符。

使用javascript根据复选框选择显示和隐藏div

问题描述

1 个解决方案

解决方案1
2 2015-09-14 06:36:40

使用javascript根据复选框选择显示和隐藏div

问题描述

1 个解决方案

解决方案1 2 2015-09-14 06:36:40

解决方案1
2 2015-09-14 06:36:40