Question

我需要为一个图像做六个复选框，如果一个或多个复选框被打了，这个图像需要更改，我该怎么做？请帮助我，我附上我的代码。

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

我有这个代码，并向我发送所选复选框的值，但图像不会更改。请帮忙。感谢

Answer 1

如果要在单击复选框后更改图像，则需要将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>

Answer 2

＆＃13;

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) {

    }
}
;

＆＃13;

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

＆＃13;

好吧，如果单击了一个或多个复选框，则会更改图像，如果取消选中所有复选框，则图像将返回到第一个复选框。我希望我也可以帮助别人，谢谢

我怎么能为java jsp做动态复选框？

2 个答案: