Wie kann ich dynamische Checkboxen für Java Jsp?

Ich muss sechs Checkboxen für ein Bild machen, und dieses Bild muss sich ändern, wenn eine oder mehrere Checkboxen geprüft werden, wie kann ich das tun? Bitte hilf mir, ich füge meinen Code bei.Wie kann ich dynamische Checkboxen für 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>

ich habe diesen Code und mir den Wert der ausgewählten Kontrollkästchen senden, aber das Bild nicht ändern. Hilfe bitte. Danke

Quelle

2017-07-04 Felipe Rojas Alvares

Sie müssen changeImage1 von einem Klick oder Änderung Handler gebunden an die Kontrollkästchen, kein Click-Handler mit dem Bild verbunden aufrufen. – James

Wenn Sie das Bild nach dem Klick auf Kontrollkästchen ändern möchten, müssen Sie changeImage1() in onchange oder onclick Methode des Kontrollkästchens aufrufen.

Beispiel:

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

Quelle

2017-07-04 18:23:53

Danke für die Antwort, der Code funktioniert perfekt, jetzt basierend auf dem gleichen Code werde ich versuchen, das Bild zu ändern, wenn es einen der 6 Werte markiert und es bleibt normal, wenn es nicht markiert ist und ich werde es teilen wenn es dir dient jemand anderes :) vielen Dank –

Danke dir auch. Vergnügen, dir geholfen zu haben. –

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>

Nun, das ändert sich das Bild, wenn es 1 oder mehr Kontrollkästchen angeklickt wird, wenn alle Kontrollkästchen nicht markiert das Bild kehrt zum ersten sind . Ich hoffe auch ich kann anderen helfen und danke

Quelle

2017-07-05 18:11:55

Wie kann ich dynamische Checkboxen für Java Jsp?

Antwort

Verwandte Themen