0
我目前正在一个项目中，用户将选择多个复选框，但是，那么将有一个条件，每个行选择一个复选框。jQuery选择每行1复选框，其中复选框是图像
我的HTML使用引导样式3.2
jQuery('.imgradio').click(function() {
jQuery('.imgradio.selected').not(this).removeClass('selected');
jQuery("[type='checkbox']").prop('checked', false);
jQuery(this).toggleClass('selected');
var rdio = jQuery(this).parent().find("input[type='checkbox']");
if (jQuery(this).hasClass('selected')) {
rdio.prop('checked', true);
}
rdio.trigger('change');
});.row {
border:2px solid #333;
}
.imgradio {
background: url('http://cdn3.iconfinder.com/data/icons/virtual-notebook/16/button_shape_oval-20.png') no-repeat center center;
min-width: 32px;
cursor: pointer;
height: 22px;
}
.imgradio.selected {
background:url('https://cdn2.iconfinder.com/data/icons/playstation-controller-buttons-3/64/playstation-flat-icon-circle-20.png') no-repeat center center;
cursor:pointer;
min-width: 32px;
height: 22px;
}<div class="container">
<div class="row bg-grey">
<div class="col-sm-12 noPadding">
<div class="row">
<div class="col-sm-4">
<p>Condition 1</p>
</div>
<div class="col-sm-2">
<div class="imgradio"> </div>
<input type="checkbox"/>
</div>
<div class="col-sm-2">
<div class="imgradio"> </div>
<input type="checkbox"/>
</div>
<div class="col-sm-2">
<div class="imgradio"> </div>
<input type="checkbox"/>
</div>
<div class="col-sm-2">
</div>
</div>
<div class="row">
<div class="col-sm-4">
<p>Condition 2</p>
</div>
<div class="col-sm-2">
<div class="imgradio"> </div>
<input type="checkbox"/>
</div>
<div class="col-sm-2">
<div class="imgradio"> </div>
<input type="checkbox"/>
</div>
<div class="col-sm-2">
<div class="imgradio"> </div>
<input type="checkbox"/>
</div>
<div class="col-sm-2">
</div>
</div>
<div class="row">
<div class="col-sm-4">
<p>Condition 3</p>
</div>
<div class="col-sm-2">
<div class="imgradio"> </div>
<input type="checkbox"/>
</div>
<div class="col-sm-2">
<div class="imgradio"> </div>
<input type="checkbox"/>
</div>
<div class="col-sm-2">
<div class="imgradio"> </div>
<input type="checkbox"/>
</div>
<div class="col-sm-2">
</div>
</div>
</div>
</div>
</div>我有什么对演示只能在中行的整个容器选择1个复选框，我需要得到是每行选择1个复选框。
容器可以包含无限行的复选框，所以脚本应该很复杂，不幸的是我是jQuery脚本中的新手。 :(
您的帮助和建议将非常感激
有将具有显示：无，所以用户只能看到并选择圆形图像 – Nooblike 2014-12-03 06:09:55
nooblike：对于单选按钮点击已经正常工作。 – 2014-12-03 06:11:58
这个问题不起作用，脚本应该让用户每行选择1个复选框。你展示的演示不会。它只在整个容器中选择1个复选框。它应该选择每行1个复选框。所以由于容器有3行，用户可以选择3个复选框。 :( 更正：你的代码是正确的，但我怎样才能使图像做到这一点，而不是复选框？复选框将显示没有它，所以复选框将被隐藏，用户将只能看到圆形图像被选中:) – Nooblike 2014-12-03 06:13:06