0

这是 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');                
      }
    }
  })
});

​</p>

目标是选中一个复选框 - 将其添加 ID 值is_checked，单击另一个复选框，然后在此复选框中添加 IDis_checked并将 ID 删除is_checked到前一个复选框。

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

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

谢谢

4

5 回答 5

1

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

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

现场演示

于 2012-04-17T23:41:58.900 回答
1 
$(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/

于 2012-04-17T23:51:45.747 回答
0

像这样的东西。

<script>
  $("input[type='checkbox']").click(function(){
    $("#is_checked").removeAttr("id");
    $(this).attr("id","is_checked");
  });
</script>
于 2012-04-17T23:34:24.983 回答
0

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

像这样：

$(document).ready(function() {

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

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

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

    });

});
​

单击此处查看 jsFiddle 演示。

于 2012-04-17T23:41:30.523 回答
0

我就是这样做的。

$(document).ready(function(){      

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

});

​</p>

首先，我会使用 .on() 而不是 .live()，因为 live 已被弃用。

Then, instead of using removing and adding IDs, I think it would be wiser to use Classes because there's functions made especially for that. Don't forget that it is possible to have multiple classes!

By using .on(), we can use it to bind it classes ".color_checkboxes" (that are also :checkbox).

When it's clicked, crawl for everything that has class "is_checked", uncheck them, then remove the class.

Then, add the class "is_checked" to the clicked checkbox.

Here is the fiddle. http://jsfiddle.net/Q8xMU/15/

Cheers.

于 2012-04-18T06:08:14.027 回答