Question

我想建立一个＆＃34;图像选择＆＃34;功能进入我的表单，如下所示：

Add a Landing Page

关于如何执行此操作有一些很好的建议（请参阅https://stackoverflow.com/a/4178575/1154642），但它们通常涉及由img或div标签制作的假表单元素。例如：

<script type="text/javascript" src="form-behavior.js"></script>
<form id="select-form">
    <img src="image.jpg" data-value="image_value">
    <img src="image2.jpg" data-value="image_value2">
    <input type="hidden" id="image-value" name="selected_image" value="">
</form>

无法访问。如何保持设计的完整性，并以可访问的方式构建它？

Answer 1

尝试使用此尺寸：

(function($){
$(document).ready(function() {
	$(document).on('click', '.image-input-group .image-radio a', function(e) {
		e.preventDefault();
		var $this = $(this);
		var $parent = $this.parent();
		$parent.parent().find('.image-radio').removeClass('active');
		$parent.find('input').click();
		$parent.addClass('active');
	}).on('click', '.image-input-group .image-checkbox a', function(e) {
		e.preventDefault();
		var $this = $(this);
		var $parent = $this.parent();
		//$parent.parent().find('.image-radio').removeClass('active');
		$parent.find('input').click();
		$parent.toggleClass('active');
	});
});
})(jQuery);

.image-input-group {
	padding-bottom: 5px;
	margin: 0 -15px;
}
.image-input-group .image-input {
	display: inline-block;
	position: relative;
}
.image-input-group input {
	opacity: 0;
	position: absolute;
	visibility: hidden;
}
.image-input-group .image-input a {
	border-radius: 5px;
	box-shadow: 0 5px 5px #ccc;
	display: inline-block;
	width: 100px;
	height: 100px;
	margin: 15px;
	padding: 15px;
	text-align: center;
	font-size: 50px;
	text-shadow: 0 1px 1px #666;
	line-height: 70px;
	position: relative;
	transition: all 0s;
	color: #eee;
	margin-bottom: 20px;
	background: #aaa; /* Old browsers */
}
.image-input-group .image-input .hidden-check {
	display: none;
	position: absolute;
	right: 22px;
	top: 22px;
	color: #eee;
	text-shadow: 0 1px 1px #666;
}
.image-input-group .image-input.active a {
	background: #74BD64; 
	/*
	background: #dfa0ff; 
	background: -moz-linear-gradient(top, #dfa0ff 0%, #14d7ff 100%); 
	background: -webkit-linear-gradient(top, #dfa0ff 0%,#14d7ff 100%); 
	background: linear-gradient(to bottom, #dfa0ff 0%,#14d7ff 100%); 
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dfa0ff', endColorstr='#14d7ff',GradientType=0 ); 
	*/
	top: 5px;
	box-shadow: 0 0px 5px #ccc;
	text-shadow: 0 1px 1px #666;
	margin-bottom: 20px;
}
.image-input-group .image-input.active .hidden-check {
	display: block;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
	<div class="row">
		<form class="ajaxform col-xs-12" method="post" action="#">



			<div class="image-input-group">
				<div class="image-radio image-input active">
					<input type="radio" checked name="vehicle" value="home" />
					<a href="#" class=""><i class="fa fa-home"></i></a>
					<div class="hidden-check"><i class="fa fa-check-circle-o"></i></div>
				</div>
				<div class="image-radio image-input">
					<input type="radio" name="vehicle" value="motorcycle" />
					<a href="#" class=""><i class="fa fa-motorcycle"></i></a>
					<div class="hidden-check"><i class="fa fa-check-circle-o"></i></div>
				</div>
				<div class="image-radio image-input">
					<input type="radio" name="vehicle" value="car" />
					<a href="#" class=""><i class="fa fa-car"></i></a>
					<div class="hidden-check"><i class="fa fa-check-circle-o"></i></div>
				</div>
				<div class="image-radio image-input">
					<input type="radio" name="vehicle" value="plane" />
					<a href="#" class=""><i class="fa fa-plane"></i></a>
					<div class="hidden-check"><i class="fa fa-check-circle-o"></i></div>
				</div>
				<div class="image-radio image-input">
					<input type="radio" name="vehicle" value="rocket" />
					<a href="#" class=""><i class="fa fa-rocket"></i></a>
					<div class="hidden-check"><i class="fa fa-check-circle-o"></i></div>
				</div>
			</div>
			
			
			
			<div class="image-input-group">
				<div class="image-checkbox image-input">
					<input type="checkbox" name="travel[]" value="home" />
					<a href="#" class=""><i class="fa fa-home"></i></a>
					<div class="hidden-check"><i class="fa fa-check-circle-o"></i></div>
				</div>
				<div class="image-checkbox image-input">
					<input type="checkbox" name="travel[]" value="motorcycle" />
					<a href="#" class=""><i class="fa fa-motorcycle"></i></a>
					<div class="hidden-check"><i class="fa fa-check-circle-o"></i></div>
				</div>
				<div class="image-checkbox image-input">
					<input type="checkbox" name="travel[]" value="car" />
					<a href="#" class=""><i class="fa fa-car"></i></a>
					<div class="hidden-check"><i class="fa fa-check-circle-o"></i></div>
				</div>
				<div class="image-checkbox image-input">
					<input type="checkbox" name="travel[]" value="plane" />
					<a href="#" class=""><i class="fa fa-plane"></i></a>
					<div class="hidden-check"><i class="fa fa-check-circle-o"></i></div>
				</div>
				<div class="image-checkbox image-input">
					<input type="checkbox" name="travel[]" value="rocket" />
					<a href="#" class=""><i class="fa fa-rocket"></i></a>
					<div class="hidden-check"><i class="fa fa-check-circle-o"></i></div>
				</div>
			</div>
			
			
		
		
		
			<div class="col-xs-12">
				<button class="btn btn-success">Submit</button>
			</div>
		</form>
	</div>
</div>

使“图像选择”可访问

1 个答案: