这是我想要发生的事情:当我单击imageContainer
div 中的复选框时,该复选框应显示为选中状态。我还添加了一些类来更改选定框的背景颜色和标签颜色。这部分正在工作。
我可以单击imageContainer
div 并选中该 div 内的复选框。但是当我直接单击复选框时,它不会在框中显示复选标记。我试过了preventDefault
,return false
但stopPropagation
没有运气。
<div class="imageContainer" id="question-container-7571">
<img src="/rfs/servicerequest/taskImages/flooring_kitchen.jpg" alt="Flooring">
<div class="l-top-space">
<label for="id_7571_11491">Flooring</label>
<div class="l-right"><input id="id_7571_11491" type="checkbox" name="7571" value="11491"></div>
<input id="id_7571_11492" type="hidden" name="7571" value="11492">
</div>
</div>
这是我正在使用的 jQuery:
jQuery('.imageContainer').toggle(
function(e) {
var imgCont = jQuery(this);
imgCont.find('input').prop('checked', true);
imgCont.addClass('ic-checked');
imgCont.find('label').addClass('ic-selected');
},
function(e) {
var imgCont = jQuery(this);
imgCont.find('input').prop('checked', false);
imgCont.removeClass('ic-checked');
imgCont.find('label').removeClass('ic-selected');
}
);
关于我所缺少的任何帮助或提示都会很棒!