基于使用javascript的复选框选择显示和隐藏div

问题描述：

您好，我需要隐藏和显示基于复选框选择的部门。目前我要显示和隐藏10分和10复选框提供了。还应该在复选框selet所有将检查所有的复选框和所有10 div应显示。一旦用户点击选择所有它现在应该改变为全部取消选择全部取消选择。一旦选择全部点击它将取消选择所有复选框，不应显示除法。请提供我的javascript解决方案，而不是jquery。
这里是代码

Hi I have a requirement for hiding and displaying the division based on checkbox selection. Currently I have to show and hide 10 division and 10 checkbox is provided for that. Also there should be on checkbox selet all which will check all the checkbox and all 10 div should be displayed. Once user will click select all it should now change to deselect all to deselect all.Once de select all is clicked it will deselect all checkbox and no division should be displayed. Kindly provide me javascript solution not jquery. Here is the code

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

答

您可以通过以下jQuery代码： / p>

You can do so by the following jQuery code:

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

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

Change the #yourdiv - and .checkbox to your CSS identifiers.

基于使用javascript的复选框选择显示和隐藏div

相关推荐