Question

需要帮助，尝试在我点击它们时打开标志图像，直到点击它们才显示。在我首先尝试解决这个问题后，我会把尺寸和其他所有内容搞乱，但是想提前说谢谢

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">



<head>

<title>Flags</title>

</head>

<body>

<script language='JavaScript' type='text/javascript'>

    function check_value(fieldvalue)
    {    
        switch(fieldvalue)
        {
            case 1:

                document.getElementById("flags").innerHTML = "<img src='argentina.jpg'>";
                    break;

            case 2:

                document.getElementById("flags").innerHTML = "<img src='australia.jpg'>"; 
                    break;

            case 3:

                document.getElementById("flags").innerHTML = "<img src='bolivia.jpg'>"; 
                    break;

            case 4:

                document.getElementById("flags").innerHTML = "<img src='cuba.jpg'>"; 
                    break;

            case 5:

                document.getElementById("flags").innerHTML = "<img src='finland.jpg'>"; 
                    break;

            case 6:

                document.getElementById("flags").innerHTML = "<img src='france.jpg'>";
                    break;

            case 7:

                document.getElementById("flags").innerHTML = "<img src='italy.jpg'>"; 
                    break;

            case 8:

                document.getElementById("flags").innerHTML = "<img src='peru.jpg'>"; 
                    break;

            case 9:

                document.getElementById("flags").innerHTML = "<img src='syria.jpg'>"; 
                    break;

            case 10:

                document.getElementById("flags").innerHTML = "<img src='tunisia.jpg'>"; 
                    break;

        }
    }

</script>

<form name='flag1'>
<table border="1">
<tr>
   <td><input type="radio" name="flags2" value="argentina" >Argentina</td>
    <td><input type="radio" name="flags2" value="australia" >Australia</td>
    <td><input type="radio" name="flags2" value="bolivia" >Bolivia</td>
    <td><input type="radio" name="flags2" value="cuba" >Cuba</td>  
    <td><input type="radio" name="flags2" value="finland" >Finland</td>
    <td><input type="radio" name="flags2" value="france" >France</td> 
    <td><input type="radio" name="flags2" value="italy" >Italy</td>  
    <td><input type="radio" name="flags2" value="peru" >Peru</td>
    <td><input type="radio" name="flags2" value="syria" >Syria</td>
    <td><input type="radio" name="flags2" value="tunisia" >Tunisia</td>
</tr>

<tr>
<td><img src="argentina.jpg" onclick='check_value(1)' ></td>
<td><img src="australia.jpg" onclick='check_value(2)' ></td>
<td><img src="bolivia.jpg" onclick='check_value(3)' ></td>
<td><img src="cuba.jpg" onclick='check_value(4)' ></td>
<td><img src="finland.jpg" onclick='check_value(5)' ></td>
<td><img src="france.jpg" onclick='check_value(6)' ></td>
<td><img src="italy.jpg" onclick='check_value(7)' ></td>
<td><img src="peru.jpg" onclick='check_value(8)' ></td>
<td><img src="syria.jpg" onclick='check_value(9)' ></td>
<td><img src="tunisia.jpg" onclick='check_value(10)' ></td>
</tr>
</table>
</form>

<div id='flags'>
</div>

</body>
</html>

Answer 1

好的，据我所知，你只想在点击实际单选按钮时显示标志图像。你有两个问题：

首先，每个表格单元格将在页面加载后立即显示图像：

<td><img src="argentina.jpg" onclick='check_value(1)' ></td>
<td><img src="australia.jpg" onclick='check_value(2)' ></td>
(etc)

其次，您将onclick函数添加到img个标记中。这意味着只有当您点击那些图像（您甚至不想显示）时才会调用这些功能，而不是单选按钮。

要“修复”这个，首先删除整个代码块：

<tr>
<td><img src="argentina.jpg" onclick='check_value(1)' ></td>
<td><img src="australia.jpg" onclick='check_value(2)' ></td>
<td><img src="bolivia.jpg" onclick='check_value(3)' ></td>
<td><img src="cuba.jpg" onclick='check_value(4)' ></td>
<td><img src="finland.jpg" onclick='check_value(5)' ></td>
<td><img src="france.jpg" onclick='check_value(6)' ></td>
<td><img src="italy.jpg" onclick='check_value(7)' ></td>
<td><img src="peru.jpg" onclick='check_value(8)' ></td>
<td><img src="syria.jpg" onclick='check_value(9)' ></td>
<td><img src="tunisia.jpg" onclick='check_value(10)' ></td>
</tr>

其次，将onclick函数添加到每个无线电控件中，如下所示：

<td><input type="radio" name="flags2" value="argentina" onclick='check_value(1)' >Argentina</td>

就个人而言，我会使用一个函数，使用国家/地区名称作为输入。

制作onClick单选按钮以显示图像

1 个答案: