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

-4

嗨我有隐藏和显示基于复选框选择分区的要求。目前我必须显示并隐藏10个分区，并提供10个复选框。也应该在复选框选择所有将检查所有复选框，并应显示所有10格。一旦用户点击选择所有它现在应该改变全部取消选择全部取消选择全部点击它将取消选择所有复选框，并且不应显示任何划分。请提供我的JavaScript解决方案，而不是jQuery。下面是代码基于复选框选择使用javascript显示和隐藏div

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

来源

2015-09-14 Mukesh Kumar

你不能要求解决方案。你应该发布你已经尝试过的，展示一些努力。 – Chris

您可以通过下面的jQuery代码这样做：

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

更改#yourdiv - 和.checkbox你的CSS的标识符。

来源

2015-09-14 06:36:40 rawrJoel

这里是我的代码 –

哪里？我看不到你的代码。 – rawrJoel

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

回答

相关问题