![](/img/trans.png)
[英]How to make checkboxes in Leaflet layers control behave like radio buttons
[英]How to make images behave like checkboxes in a form?
我想在表单中放置许多图像,然后只需单击它们就可以选择它们。 选中图像后,我可以在其周围显示一个边框,表明已选中该图像,就像复选框一样,可以以相同形式选择多个图像。
但是如何去做呢? 我不确定如何让表单将图像注册为选定元素,因此当表单提交到服务器端时,这些图像上的值也将被发送出去。
我希望我可以将图像设置为复选框的背景,但是由于浏览器的限制,当然不能使用。 关于如何做到这一点的任何想法?
为您的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。
检出: http : //api.jquery.com/image-selector/
<input type="image" />
$("input:image").css({background:"yellow", border:"3px red solid"});
<!-- 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.