如何使圖像表現得像表單中的復選框？

Question

我想在表單中放置許多圖像，然后只需單擊它們就可以選擇它們。 選中圖像后，我可以在其周圍顯示一個邊框，表明已選中該圖像，就像復選框一樣，可以以相同形式選擇多個圖像。

但是如何去做呢？ 我不確定如何讓表單將圖像注冊為選定元素，因此當表單提交到服務器端時，這些圖像上的值也將被發送出去。

我希望我可以將圖像設置為復選框的背景，但是由於瀏覽器的限制，當然不能使用。 關於如何做到這一點的任何想法？

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

Answer 2

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

<input type="image" />

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

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