0

在过去的 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() 加载输入

4

2 回答 2

2

从字面上看，当您删除该属性时，您就是将其从 DOM 中取出。您只想切换选中的属性。需要注意的一些变化。

.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;
    });

});​
于 2012-11-12T22:35:02.700 回答
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");
    }
  }

});
于 2012-11-12T22:36:45.300 回答