2017-07-04 97 views
0

我需要爲一個圖像做六個複選框,並且這個圖像需要改變,如果一個或多個複選框被激發,我該怎麼做?請幫助我,我附上我的代碼。我怎樣才能爲java jsp做動態複選框?

<html> 
 
    <head> 
 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
 
     <title>JSP Page</title> 
 
    </head> 
 
    <body> 
 
     <img src="img/fotodiente/1.jpg" width="78" height="107" alt="1" id="diente1" onclick="changeImage1()"/> 
 
     
 
     <form name="form1" onsubmit="checkBoxValidation()"> 
 
      <p><input type="checkbox" name="chbdiente1" value="1"/>Vestibular</p> 
 
      <p><input type="checkbox" name="chbdiente1" value="2"/>Mesial</p> 
 
      <p><input type="checkbox" name="chbdiente1" value="3"/>Oclusal</p> 
 
      <p><input type="checkbox" name="chbdiente1" value="4"/>Distal</p> 
 
      <p><input type="checkbox" name="chbdiente1" value="5"/>Palatino</p> 
 
      <p><input type="checkbox" name="chbdiente1" value="6"/>Lingual</p> 
 
      <p><input type="submit" value="submit"/> 
 
     </form> 
 
     <%String chbdiente1[] = request.getParameterValues("chbdiente1"); 
 
      if (chbdiente1 != null) {%> 
 
     <script> 
 
      function changeImage1() { 
 
       var image = document.getElementById('diente1'); 
 

 
       image.src = "img/fotodiente/1.1.jpg"; 
 
      } 
 
      ; 
 
     </script> 
 
     <ul><%for (int i = 0; i < chbdiente1.length; i++) {%> 
 
      <li><%=chbdiente1[i]%></li><%}%> 
 
     </ul><%}%> 
 
    </body> 
 
</html>

我有這樣的代碼,並給我選擇的複選框的值,但圖像沒有改變。請幫助。謝謝

+0

您需要通過點擊或更改與複選框綁定的處理程序調用changeImage1,而不是綁定到圖像的單擊處理程序。 – James

回答

0

如果您想在點擊複選框後更改圖像,您需要將changeImage1()調入onchange或onclick方法的複選框。

實施例:

<script> 
    $('document').ready(function(){ 
     $('input[type="checkbox"]').click(function(){ 
      changeImage1(); 
     }); 


    }); 

    function changeImage1() { 
      var image = document.getElementById('diente1'); 
      image.src = "img/fotodiente/1.1.jpg"; 
    } 
</script> 
+0

感謝您的回覆,代碼工作完美,現在基於相同的代碼,我會嘗試在6個值中有1個標記時改變圖像,如果沒有標記,我會分享它如果它爲你服務別人:)非常感謝你 –

+0

謝謝你。樂意幫助你。 –

0

function changeImage1() { 
 

 
    var image = document.getElementById('diente1'); 
 
    var checkboxes = document.getElementById("form1"); 
 
    var cont = 0; 
 

 
    try { 
 
     for (var x = 0; x < checkboxes.length; x++) { 
 
      if (checkboxes[x].checked) { 
 
       cont = cont + 1; 
 
      } 
 
     } 
 
    } catch (e) { 
 

 
    } 
 
    try { 
 
     if (cont > 0) { 
 
      image.src = "img/fotodiente/1.1.jpg"; 
 
      d1 = 2; 
 
      array.push("Pieza 1"); 
 
      var chb2 = document.getElementsByName("form1"); 
 
     } else if (cont === 0) { 
 
      image.src = "img/fotodiente/1.jpg"; 
 
      d1 = 1; 
 
      array.splice(1, 1); 
 
     } 
 
    } catch (e) { 
 

 
    } 
 
} 
 
;
<img src="img/fotodiente/1.jpg" class="item_thumb" width="78" height="107" alt="1" id="diente1" onclick="changeImage1()"/> 
 

 
       <form id="form1" method="post" action=""> 
 
        <input type="checkbox" id="chbdiente1" value="1" onclick="changeImage1();" /><label>Vestibular</label> 
 
        <input type="checkbox" id="chbdiente1" value="2" onclick="changeImage1();" /><label>Mesial</label> 
 
        <input type="checkbox" id="chbdiente1" value="3" onclick="changeImage1();" /><label>Oclusal</label> 
 
        <input type="checkbox" id="chbdiente1" value="4" onclick="changeImage1();" /><label>Distal</label> 
 
        <input type="checkbox" id="chbdiente1" value="5" onclick="changeImage1();" /><label>Palatino</label> 
 
        <input type="checkbox" id="chbdiente1" value="6" onclick="changeImage1();" /><label>Lingual</label> 
 
        <input type="button" name="Submit" value="Contar" hidden=""> 
 
       </form>

那麼,當有1個或多個複選框點擊時,如果所有的複選框未被選中的圖像返回到第一個改變圖像。 我希望我也能幫助其他人,謝謝