Php 选中复选框时需要更改图像

我有一个表单，要求用户从淹没框中进行选择，当他们进行选择时，页面顶部的徽标将更改以匹配他们的选择。 这是你的电话号码。 所以我的问题是，我希望能够将下拉框中所选内容的名称发布到mysql，但是javascript已经在使用该值来更改图像。在db中发布的所有内容都是图像的名称，而不是框中的值

<br/><br/>

<select id="dd" onChange="swapImage()" style="width: 150px">
<option value=""></option>
<option value="http://xxxs.com/demo1/decals/falcons2013.jpg">Falcons</option>
<option value="http://xxxxx.com/demo1/decals/gvklogo2013.png">Green Valley   Knights</option>
<option value="http://xxxxx.com/demo1/decals/longhorns2013.jpg">Longhorns</option>
</body>
</html>

我想做的不是使用下拉框来更改图像，而是如何使用复选框来完成同样的事情？我有一个默认的标志，它总是显示在表格上，直到作出选择，所以我需要保持在适当的位置

<br/><br/>

<select id="dd" onChange="swapImage()" style="width: 150px">
<option value=""></option>
<option value="http://xxxs.com/demo1/decals/falcons2013.jpg">Falcons</option>
<option value="http://xxxxx.com/demo1/decals/gvklogo2013.png">Green Valley   Knights</option>
<option value="http://xxxxx.com/demo1/decals/longhorns2013.jpg">Longhorns</option>
</body>
</html>

以下是JSFIDLE中的代码

<br/><br/>

<select id="dd" onChange="swapImage()" style="width: 150px">
<option value=""></option>
<option value="http://xxxs.com/demo1/decals/falcons2013.jpg">Falcons</option>
<option value="http://xxxxx.com/demo1/decals/gvklogo2013.png">Green Valley   Knights</option>
<option value="http://xxxxx.com/demo1/decals/longhorns2013.jpg">Longhorns</option>
</body>
</html>

---

我认为使用复选框会更具挑战性，除非你让它们像广播组一样工作。如果要保留select，可以将img src置于

标题

，以便使用该值-

<br/><br/>

<select id="dd" onChange="swapImage()" style="width: 150px">
<option value=""></option>
<option value="http://xxxs.com/demo1/decals/falcons2013.jpg">Falcons</option>
<option value="http://xxxxx.com/demo1/decals/gvklogo2013.png">Green Valley   Knights</option>
<option value="http://xxxxx.com/demo1/decals/longhorns2013.jpg">Longhorns</option>
</body>
</html>

<select id="dd" onChange="swapImage()" style="width: 150px">
    <option value=""></option>
    <option value="Falcons" title="http://xxxxx.com/demo1/decals/falcons2013.jpg" >Falcons</option>
    <option value="Green Valley Knights" title="http://xxxxx.com/demo1/decals/gvklogo2013.png">Green Valley Knights</option>
    <option value="Longhorns" title="http://xxxxx.com/demo1/decals/longhorns2013.jpg">Longhorns</option>
</select>

请参阅此更新的JSFIDLE示例-

<br/><br/>

<select id="dd" onChange="swapImage()" style="width: 150px">
<option value=""></option>
<option value="http://xxxs.com/demo1/decals/falcons2013.jpg">Falcons</option>
<option value="http://xxxxx.com/demo1/decals/gvklogo2013.png">Green Valley   Knights</option>
<option value="http://xxxxx.com/demo1/decals/longhorns2013.jpg">Longhorns</option>
</body>
</html>

编辑
如果您想保存所选的imgsrc，我建议您在select下面创建一个隐藏元素

<br/><br/>

<select id="dd" onChange="swapImage()" style="width: 150px">
<option value=""></option>
<option value="http://xxxs.com/demo1/decals/falcons2013.jpg">Falcons</option>
<option value="http://xxxxx.com/demo1/decals/gvklogo2013.png">Green Valley   Knights</option>
<option value="http://xxxxx.com/demo1/decals/longhorns2013.jpg">Longhorns</option>
</body>
</html>

<input type="hidden" name="img_url" id="img_url" />

然后可以在表单上捕获-

<br/><br/>

<select id="dd" onChange="swapImage()" style="width: 150px">
<option value=""></option>
<option value="http://xxxs.com/demo1/decals/falcons2013.jpg">Falcons</option>
<option value="http://xxxxx.com/demo1/decals/gvklogo2013.png">Green Valley   Knights</option>
<option value="http://xxxxx.com/demo1/decals/longhorns2013.jpg">Longhorns</option>
</body>
</html>

$img_url = $_POST['img_url']

---

尝试单选按钮而不是复选框，复选框允许多个选择，而单选按钮只允许一个选择（这是您应该在这里使用的）谢谢pattyd，我有一个脚本，一次只允许选中一个复选框，如果用户选择了另一个复选框，它将取消选中该复选框。谢谢Sean，这正是我想要做的，但无法理解！您知道我现在如何在MySQL中存储所选徽标的路径吗？是否可以修改此javascript以说明是否选中了此团队，然后存储此徽标的路径？或者类似的东西？请看我上面的编辑。我会使用隐藏输入，并在

swapImage（）

函数中设置值。Sean我尝试了类似的方法，只是名称不同，但没有效果，我是否将隐藏字段放在or下面？当我将其添加到下面时，当我查看formok时，所有选项值都在下拉框之外，我在之前添加了它，并且这些值返回到下拉框中，但它仍然不会在数据库中存储所选图像的路径。