Question

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

这是我当前的表单代码

    <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();
    });
});

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

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

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

隐藏chekbox，突出显示选定的pitures

3 个答案: