Question

过去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（）

加载输入

Answer 1

当您删除该属性时，您将从字面上删除它。您只想切换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; }); });

Answer 2

这应该做

$('#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");
    }
  }

});

jquery切换复选框

2 个答案: