Question

Here is the link on simple example on jsfiddle

$(document).ready(function(){
  $('input[type=checkbox]').live("click", function() {
    if($(this).attr('class') == 'color_checkboxes') {
      if($(this).attr('id') == 'is_checked') {
        $(this).removeAttr('id');
        $(this).attr('checked', false);
      } else {
        $('input[type=checkbox][class=color_checkboxes]').attr('checked', false);
        $(this).attr('checked', true).attr('id', 'is_checked');                
      }
    }
  })
});

目标是选中一个复选框 - 添加ID值is_checked，点击另一个复选框，然后在此复选框中添加ID is_checked并将ID is_checked移至前一个。

示例 - 勾选复选框绿色，然后选中蓝色然后再次绿色 - 绿色按钮将不会被选中 - 我的意思是，那个原因是is_checked。当您尝试第二次检查绿色按钮时，它已经可以正常工作。

这不是一个用户友好的行为，所以我想问你，如果有一些方法/建议，如何解决它。

由于

Answer 1

虽然你应该使用radio buttons这里是复选框版本：

$('input[type=checkbox].color_checkboxes').click(function() {
    if (this.checked)
        $(this).siblings().prop('checked', false);
});

Live DEMO

Answer 2

$(document).ready(function() {
    var checkboxes = $('.color_checkboxes:checkbox');

    checkboxes.click(function(e) {
        var clicked = $(this);

        checkboxes.not(clicked).removeAttr('id').attr('checked', false);

        if(clicked.attr('checked')) {
            clicked.attr('id', 'is_clicked');
        } else {
            clicked.removeAttr('id');
        }
    });
});

http://jsfiddle.net/xkMKk/1/

Answer 3

像这样的东西。

<script>
  $("input[type='checkbox']").click(function(){
    $("#is_checked").removeAttr("id");
    $(this).attr("id","is_checked");
  });
</script>

Answer 4

你可以重新考虑很多因素。首先，您应该.change()到.on()绑定，因为.live()已弃用。其次，您应该将所有复选框缓存到变量中。第三，从版本1.6开始，您应该使用.prop()来处理属性，而不是.attr()。然后，您只需将所有复选框的checked属性设置为false，同时选中当前复选框的check属性为true。

像这样：

$(document).ready(function() {

    var $checkboxes = $("input[type=checkbox]");

    $checkboxes.on("change", function() {

        $checkboxes.prop("checked", false);
        $(this).prop("checked", true);

    });

});

的 Click here to view jsFiddle demo. 的

Answer 5

我就是这样做的。

$(document).ready(function(){      

    $(document).on("click", ".color_checkboxes:checkbox", function() {
        $(".is_checked").prop("checked", false).removeClass("is_checked");
        $(this).addClass("is_checked");
    });      

});

首先，我会使用.on（）而不是.live（），因为不推荐使用live。

然后，我认为使用Classes会更明智，而不是使用删除和添加ID，因为有特别针对它的功能。不要忘记可以有多个班级！

通过使用.on（），我们可以使用它来绑定类“.color_checkboxes”（也是：复选框）。

点击它时，抓取所有包含“is_checked”类的内容，取消选中它们，然后删除该类。

然后，将“is_checked”类添加到单击的复选框中。

这是小提琴。 http://jsfiddle.net/Q8xMU/15/

干杯。

jQuery无法在一个动作中进行2次更改？

5 个答案: