選擇複選框語句或文本將出現在html

爲什麼我的編碼不起作用？我想要這樣;如果選中複選框，語句或文本將根據if else或swith出現。你能修正我的編碼嗎？我的編碼有什麼問題？這裏是我的代碼：選擇複選框語句或文本將出現在html

<script type="text/javascript"> 
 
    function ShowHideDiv(Fish) { 
 
    var subAnimal = document.getElementById("subFish"); 
 
    subFish.style.display = Fish.checked ? "block" : "none"; 
 
    console.log(Fish.value) 
 
    console.log("Text Inside LABEL:" + Fish.parentNode.textContent) 
 
    } 
 
</script> 
 

 
<label for="Fish"> 
 
    <input type="checkbox" id="Fish" onclick="ShowHideDiv(this)" value="Fish"/> Fish 
 
</label> 
 

 
<div id="subFish" style="display: none"> 
 

 
    <label> 
 
    <input type="checkbox" id="subFish1" /> Tank 
 
</label> 
 

 
    <label> 
 
    <p id="subFishs1" ></p> 
 
</label> 
 

 
    <label> 
 
\t <input type="checkbox" id="subFish2" /> Fishing 
 
</label> 
 

 
    <label> 
 
    <p id="subFishs2" ></p> 
 
</label> 
 

 
    <script> 
 
    function ShowHideDiv2(this) { 
 

 
     var a = document.getElementById("subAnimal1").checked; 
 
     var b = document.getElementById("subAnimal2").checked; 
 

 
     if (a && b) { 
 
     document.getElementById("subAnimal1").addEventListener("click", function() { 
 
       document.getElementById("subAnimals1").innerHTML = "Bad"; 
 
      } else if (a && !b) { 
 
       document.getElementById("subAnimal2").addEventListener("click", function() { 
 
        document.getElementById("subAnimals2").innerHTML = "Cute"; 
 
       } else { 
 
        alert("Under Development!"); 
 
       } 
 
       } 
 
    </script>

來源

2017-05-22 wani

當我運行該代碼段有一個錯誤顯示隱藏div的，例如：「消息」：「未捕獲的SyntaxError：意外的標記這個」，「文件名」：「HTTP：// stacksnippets。 net/js「，」lineno「：43，」colno「：27 .also注意功能ShowHideDiv2未使用 – user7294900

有很多錯誤，在你的代碼。你應該使用jQuery而不是使用核心JavaScript。下面是使用jQuery

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery Show Hide Elements Using Checkboxes</title> 
<style type="text/css"> 
    .box{ 
     color: #fff; 
     padding: 20px; 
     display: none; 
     margin-top: 20px; 
    } 
    .red{ background: #ff0000; } 
    .green{ background: #228B22; } 
    .blue{ background: #0000ff; } 
    label{ margin-right: 15px; } 
</style> 
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
    $('input[type="checkbox"]').click(function(){ 
     var inputValue = $(this).attr("value"); 
     $("." + inputValue).toggle(); 
    }); 
}); 
</script> 
</head> 
<body> 
    <div> 
     <label><input type="checkbox" name="colorCheckbox" value="red"> red</label> 
     <label><input type="checkbox" name="colorCheckbox" value="green"> green</label> 
     <label><input type="checkbox" name="colorCheckbox" value="blue"> blue</label> 
    </div> 
    <div class="red box">You have selected <strong>red checkbox</strong> so i am here</div> 
    <div class="green box">You have selected <strong>green checkbox</strong> so i am here</div> 
    <div class="blue box">You have selected <strong>blue checkbox</strong> so i am here</div> 
</body> 
</html>

來源

2017-05-22 07:33:27

選擇複選框語句或文本將出現在html

回答

相關問題