Question

我在CSS中创建了一个3图像复选框，我想只选择一个图像，如单选按钮，因此您不能选择多个图像。我不太确定如何实现这一点，所以一点帮助会很高兴。谢谢你提前

以下是CSS文件和我的表单：

＆＃13;

<section>
<div class="container">
	<div class="row">
		<!-- section title -->
		<div class="col-md-12 text-center">
			<span class="title-small text-uppercase letter-spacing-3 font-weight-600" style=" color: #da7e57;">Antipasto</span>
			<div class="separator-line-thick bg-black no-margin-bottom margin-one xs-margin-top-five"></div>
		</div>
		<!-- end section title -->
	</div>
	<section class="wow fadeIn blog-details-text" style="padding-top: 30px;padding-bottom: 30px">
		<div class="container">
			<div class="col-md-4 col-sm-6 checkboox">
				<input type="checkbox" id="myCheckbox1" />
				<label for="myCheckbox1" class="checkbox">
					<img src="{{URL::asset('external_assets/assets/images/sangiovese.jpg') }}">
				</label>
			</div>
			<div class="col-md-4 col-sm-6 checkboox">
				<input type="checkbox" id="myCheckbox2" />
				<label for="myCheckbox2"  class="checkbox">
					<img src="{{URL::asset('external_assets/assets/images/vintageTORTELLINIragu.jpg') }}">
				</label>
			</div>
			<div class="col-md-4 col-sm-6 checkboox">
				<input type="checkbox" id="myCheckbox3" />
					<label for="myCheckbox3"  class="checkbox">
				<img src="{{URL::asset('external_assets/assets/images/bolied_meat.jpg') }}">
			</label>
			</div>
		</div>
	</section>
</div>
</section>

＆＃13;

data frame

＆＃13;

Answer 1

尝试将其放入您的js文件

$('input[type="checkbox"]').on('change', function() {
    $('input[type="checkbox"]').not(this).prop('checked', false);
});

Answer 2

将输入类型定义为RadioButtons。如果您需要将它们组合在一起以使它们作为单选按钮工作，但为了保留当前的布局，请将它们与＆＃34; name＆＃34;属性是一样的。示例：http://www.echoecho.com/htmlforms10.htm

仅选择一个图像复选框

2 个答案: