html 复选框互斥,如何使一组复选框互斥？

我希望this可以使用

HTML的

A |

B |

C

1 |

2 |

3

的JavaScript

// include jQuery library

var enforeMutualExcludedCheckBox = function(group){

return function() {

var isChecked= $(this).prop("checked");

$(group).prop("checked", false);

$(this).prop("checked", isChecked);

}

};

$(".alpha").click(enforeMutualExcludedCheckBox(".alpha"));

$(".num").click(enforeMutualExcludedCheckBox(".num"));

好吧，单选按钮应该是在相互排除的选项中使用的单选按钮，尽管我遇到了一个场景，其中客户端喜欢零到一个选定的项目，并且javaScript的复选框运行良好。

更新

看看我的回答，我意识到两次引用css类是多余的。我更新了我的代码以将其转换为jquery插件，并创建了两个解决方案，具体取决于首选项

获取检查相互排除的所有复选框

$.fn.mutuallyExcludedCheckBoxes = function(){

var $checkboxes = this; // refers to selected checkboxes

$checkboxes.click(function() {

var $this = $(this),

isChecked = $this.prop("checked");

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

$this.prop("checked", isChecked);

});

};

// more elegant, just invoke the plugin

$("[name=alpha]").mutuallyExcludedCheckBoxes();

$("[name=num]").mutuallyExcludedCheckBoxes();

HTML

A |

B |

C

1 |

2 |

3

将包含元素中所有相互排除的复选框分组

的JavaScript

$.fn.mutuallyExcludedCheckBoxes = function(){

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

$checkboxes.click(function() {

var $this = $(this),

isChecked = $this.prop("checked");

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

$this.prop("checked", isChecked);

});

};

// select the containing element, then trigger the plugin

// to set all checkboxes in the containing element mutually

// excluded

$(".alpha").mutuallyExcludedCheckBoxes();

$(".num").mutuallyExcludedCheckBoxes();

HTML

A |

B |

C

1 |

2 |

3

享受： - )