基於複選框選擇使用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

回答

相關問題