javascript - 使用 javascript 使复选框表现得像单选按钮

Question

我需要使用 javascript 来操纵复选框的行为。它们的行为基本上应该像单选按钮(一次只能选择一个，并且取消选择之前的任何选择)。

问题是我不能首先使用普通的单选按钮，因为每个单选按钮的名称属性都不同。

我知道这不是让苹果看起来像梨的最终和最 Shiny 的解决方案，而且 w3c 不会为此竖起大拇指，但它现在是一个比改变整个cms结构的核心php逻辑;-)

非常感谢任何帮助!

Answer 1

HTML:

<label><input type="checkbox" name="cb1" class="chb" /> CheckBox1</label>
<label><input type="checkbox" name="cb2" class="chb" /> CheckBox2</label>
<label><input type="checkbox" name="cb3" class="chb" /> CheckBox3</label>
<label><input type="checkbox" name="cb4" class="chb" /> CheckBox4</label>

jQuery :

$(".chb").change(function() {
    $(".chb").prop('checked', false);
    $(this).prop('checked', true);
});

如果您希望用户可以取消选中所选项:

$(".chb").change(function() {
    $(".chb").not(this).prop('checked', false);
});

演示:

http://jsfiddle.net/44Zfv/724/