如何使图像的行为类似于表单中的复选框
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>
相关文章:
- 展开表使用复选框
- 函数更改不适用于动态创建的表的复选框
- 应用程序脚本-拆分谷歌表单复选框用逗号回答
- ajax后表单复选框更改时jquery ajax不工作
- “角度表单”复选框默认值
- 如何使基于javascript的表单复选框在发送表单之前使用javascript进行验证
- 如何读取html表中复选框的值,该表是作为内部html动态插入到表单元格中的
- Javascript:动态表单复选框验证
- 使用AJAX、PHP和MYSQL在另一个复选框中显示来自html表单复选框的多个值
- jquery dataable为对象初始化的表添加复选框
- 如何获取MDL表中复选框的状态?
- 在jquery中不能从表单复选框获取和传递值到$_POST
- 如何使用javascript使Spring表单复选框只读
- 显示在文档本身中选中了多少个表单复选框
- 为什么可以't验证我的html表中复选框项上未选中的值吗
- 如何通过ajax将值从表单复选框传递到邮件
- 如何通过Javascript计算表中复选框的数量'Id
- JS表按复选框排序
- 如何获取表中复选框的值
- 当页面加载时,使用javascript逗号分隔变量重新填充表单复选框值