如何使图像表现得像表单中的复选框？答案

【问题标题】：How to make images behave like checkboxes in a form?如何使图像表现得像表单中的复选框？
【发布时间】：2011-05-19 03:00:54
【问题描述】：

我想在一个表单中放置一些图像，并且只需单击它们就可以选择它们。选择图像后，我可以在其周围显示一个边框，表明它已被选中，就像复选框一样，可以在同一个表单中选择多个图像。

但是该怎么做呢？我不确定如何让表单将图像注册为选定元素，因此当表单提交到服务器端时，这些图像上的值也会被发送过来。

我希望我可以将图像设置为复选框的背景，但由于浏览器的限制，这当然不起作用。关于如何做到这一点的任何想法？

【问题讨论】：

标签： javascript jquery html forms

【解决方案1】：

对于你的 html 确实有这个。

<form id="form1">
    <img src="barney.jpg" title="barney" id="barneyCheckImage" />
    <input type="checkbox" id="imgCheck" name="imgCheck" value="barney" style="visibility: hidden;" />
    <input type="submit" value="Submit" />
</form>

为您的脚本

$(document).ready(function() {

    $('form#form1').find('img#barneyCheckImage').toggle(
        function(){
            $(this).css('border', '1px solid green');
            $('form#form1').find('input[id=imgCheck]').attr('checked', 'checked');
        },
        function(){
            $(this).css('border', 'none');
            $('form#form1').find('input[id=imgCheck]').removeAttr('checked');
        }
    );

    // just to test for the checkbox.
    $('form#form1').submit(function(e){
        e.preventDefault();
        var form = $('form#form1').serialize();
        alert(form);
    });
});

编辑：

我已经编辑了它以供 BalusC 关注。

对于输入类型的图像，您也可以直接使用$('#imgCheck') 而不是$('form#form1').find('input[id=imgCheck]')，但对我来说，我不想在表单上有很多 id。

【讨论】：

我会通过id 选择表单，而不是通过全局表单选择器，或者只选择单独的imgs/checkboxes。当您有多个表单（最终复选框输入具有相同名称）时，此代码将失败。
这只是一个示例代码，当然这对于多个表单会失败，TS 只是要求图像复选框行为.. :)

【解决方案2】：

签出：http://api.jquery.com/image-selector/

<input type="image" />

 $("input:image").css({background:"yellow", border:"3px red solid"});

【讨论】：

【解决方案3】：

<!-- Choose some styles for our custom form elements -->
<style>
    .imageCheckbox {
        display: none;
    }

    .imageToggle .toggleImage {
        /* default/unselected image styles here */
    }
    .imageToggle .selectedImage {
        /* selected image styles here */
    }
</style>

<!-- Add a script to handle when the user clicks on an image -->
<script>
    function toggleImage(containerElem) {
        //toggle the checkbox value
        var checkBox = containerElem.getElementsByClassName("imageCheckbox");
        checkBox.checked = ! checkBox.checked;

        //update the image styles
        var image = containerElem.getElementsByClassName("toggleImage");
        if (checkBox.checked) {
            image.className += " selectedImage";
        }
        else {
            image.className = "toggleImage";
        }
    }
</script>

<!-- Build the form -->
<form>
    <div class="imageToggle" onclick="toggleImage(this);">
        <input class="imageCheckbox" type="checkbox" id="checkbox_0" name="checkbox_0" />
        <img class="toggleImage" src="/img_0.png" />
    </div>
    <div class="imageToggle" onclick="toggleImage(this);">
        <input class="imageCheckbox" type="checkbox" id="checkbox_1" name="checkbox_1" />
        <img class="toggleImage" src="/img_1.png" />
    </div>
    <!-- etc. -->
</form>

【讨论】：