jquery切换复选框

时间:2012-11-12 22:30:45

标签: jquery checked

过去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()

加载输入

2 个答案:

答案 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");
    }
  }

});