过去2个小时我一直在这里,并且无法理解这一点。
我有一个列表项,当点击时,jquery会拉出li项的类,这是一种颜色。然后将第一个字母大写,然后找到带有颜色匹配的复选框值,并将其标记为已选中。
只有我想要它,以便如果有人再次点击li项目,它将取消选中复选框
有人可以提供帮助吗?
$('#colours li').live('click', function (){
var color = $(this).attr('class');
color = color[0].toUpperCase() + color.slice(1);
console.log($('input[value="'+color+'"]'));
$(this).css('opacity','0.5');
if($('input[value="'+color+'"]:checked').length) {
$('input[value="'+color+'"]').attr('checked', true);
console.log("checked");
} else {
$('input[value="'+color+'"]').removeAttr('checked');
console.log("not checked");
}
});
<ul id="colours">
<li class="black"></li>
<li class="brown"></li>
</ul>
<input type="checkbox" name="color" value="Black" class="hidden" />
<input type="checkbox" name="color" value="Brown" class="hidden" />
忘了添加ul并使用jquery .load()
加载输入答案 0 :(得分:2)
当您删除该属性时,您将从字面上删除它。您只想切换checked属性。需要注意的一些变化。
.live()
已被弃用;我已将其替换为正确的.on()
电话。
.attr()
在几乎所有情况下都已弃用,赞成.prop()
。我也替换了它。
我们不需要检查长度,我们需要检查是否检查了元素。 jQuery提供.is()
psuedo-selector
:checked
。
$(document).on('click', '#colours li', function() {
var color = $(this).prop('class');
color = color[0].toUpperCase() + color.slice(1);
$(this).css('opacity', '0.5');
$('input[value="' + color + '"]').prop('checked', function(i,oldVal){
return !oldVal;
});
});
答案 1 :(得分:1)
这应该做
$('#colours').on('click', 'li', function (){
var th = $(this);
var color = th.attr('class');
color = color[0].toUpperCase() + color.slice(1);
var input = $('input[value="'+color+'"]')
console.log(input);
th.css('opacity','0.5');
if(input.length == 1) {
if (input.is(':checked')) {
input.prop('checked', false);
console.log("not checked");
} else {
input.prop('checked', true);
console.log("checked");
}
}
});