隐藏复选框，突出显示所选图片

Question

我想隐藏我的复选框并用图片替换它们。目前我已经有了图片，但我也想自己隐藏复选框。如果其中一张图片被选中，它应该有一个突出显示的边框。如果有任何帮助，我将非常高兴

这是我当前的表单代码

    <form type="post" action="photoselection.php">
            <div id="photowrapper">

                <div class="photo">
                    <input type="checkbox" value="" name="bild1">
                    <label class="label_item" for="rbild1"><img src="bild1.jpg"/></label>
                </div>
                <div class="photo">
                    <input type="checkbox" value="" name="bild2" id="rbild2">
                    <label class="label_item" for="rbild2"><img src="bild2.jpg"/></label>
                </div>
                <div class="photo">
                    <input type="checkbox" value="" name="bild3" id="rbild3">
                    <label class="label_item" for="rbild3"><img src="bild3.jpg"/></label>
                </div>
                <div class="photo">
                    <input type="checkbox" value="" name="bild4" id="rbild4">
                    <label class="label_item" for="rbild4"><img src="bild4.jpg"/></label>
                </div>
                <div class="photo">
                    <input type="checkbox" value="" name="bild5" id="rbild5">
                    <label class="label_item" for="rbild5"><img src="bild5.jpg"/></label>
                </div>
                <div class="photo">
                    <input type="checkbox" value="" name="bild6" id="rbild2">
                    <label class="label_item" for="rbild2"><img src="bild2.jpg"/></label>
                <Input type = "Submit" Name = "Submit" VALUE = "Bild anzeigen">
                </div>
            </div>
            </form>

Answer 1

You can do it using CSS
<style> 

.photo > input{
display:none;
}

.photo > input:checked + label > img{
border: 3px solid black;
}

</style>

希望它有用

Answer 2

正如我在评论中所说（以及@roullie 提到的），一种方法是使用 jQuery / JS，隐藏复选框的一种简单方法是这样做：

jQuery 示例：

$(document).ready(function() {
    $( ".checkbox" ).click(function() {
        $( this ).hide();
    });
});

然后将复选框 class 应用于显示图像时要隐藏的任何复选框。

这也可用于再次显示复选框或添加一些其他逻辑以在显示图像时执行。

Answer 3

使用您的图像作为背景图像，并借助包装器可以完全隐藏复选框。也适用于单选按钮（稍微添加）

//HTML
<div class="checkbox">
    <input id="check" value="" name="check" checked="checked" type="checkbox">
    <label for="check"></label>
</div>

//CSS:
.checkbox input[type="checkbox"] {
    display: none;
}

.checkbox input[type="checkbox"] + label {
    display: block;
    float: left;
    border: 1px solid grey;
    width: 100px;
    height: 50px;
    background: transparent url("https://placehold.it/100x50/4DA61F") no-repeat scroll 0 0;
}

.checkbox input[type="checkbox"]:checked + label {
    border: 1px solid darkred;
    background: transparent url("https://placehold.it/100x50/F3C914") no-repeat scroll 0 0;
}

JSFiddle Example 1

这是带有内联图像的第二种解决方案：

//HTML
<div class="checkbox">
    <input id="check" value="" name="check" type="checkbox"/>
    <label for="check">
        <img src="https://placehold.it/100x50/deff00" alt=""/>
    </label>
</div>

//CSS
.checkbox input[type="checkbox"] {
    display: none;
}

.checkbox input[type="checkbox"] + label {
    display: block;
    float: left;
    font-size: 0;
    border: 2px solid #f4f4f4;
}

.checkbox input[type="checkbox"]:checked + label {
    border: 2px solid red;
}

JSFiddle Example 2

隐藏复选框，突出显示所选图片

hide chekbox, highlight selected pitures

html

php

forms

checkbox

label