jQuery复选框组

我必须为复选框创建一些组。就像我有3个复选框'value =“group1”'，它只允许我选择其中一个复选框，该组下的其他复选框会被取消选中。我在那里得到了一半，所以我可以根据他们的组筛选复选框，我可以将它们设置为false。问题在于将右侧复选框的复选框值设置为“已选中”。我想我可能会为此使用错误的方法，因为它似乎阻止了他们始终被选中......所以也许有另一种方法可以解决这个问题？jQuery复选框组

你可以看到我现在的JS提琴在这里：http://www.jsfiddle.net/Rph8z/

来源

2011-02-01 WraithLux

为什么不使用单选按钮？这就是他们的目的。如果只能选择一个组中的一个项目，并且复选框不止一个，请使用单选按钮。这里是你更新的小提琴：http://www.jsfiddle.net/Rph8z/2/（他们必须有相同的名字）。 – 2011-02-01 13:49:41

必须有选择不选择任何东西，你不能取消选择单选按钮，除非你创建一个标记为“无”的新选项，但我不喜欢那个。 – WraithLux 2011-02-01 13:52:14

为什么不呢？如果我不得不在一个`none`值和基本上试图复制一些已经存在的涉及JavaScript的行为之间进行选择，并且在JS被禁用时不能工作，我会明确选择none。除此之外，如果有（预选）`none`选项，用户可能会更容易理解，但这取决于上下文。 – 2011-02-01 13:54:23

我们使用复选框，因为我们希望允许用户检查多个答案

如果你想允许只有一个答案你必须使用单选按钮。这是标准。

如果你坚持原来的方式有正确的代码：

$(".selector").children("input:checkbox").click(function(e){ 
var test = $(this).val(); 
if($(this).attr('checked')==true) { 
    $('input[value='+test+']').each(function() { 
    $(this).attr('checked',false); 
}) 

    $(this).attr('checked',true) 
} 
});

at JSFIDDLE

来源

2011-02-01 14:06:42

由于@Felix在他的评论中指出的，您使用的是错误的工作工具。单选按钮就好办多了，和更合理的（因为你只需要其中的一个选择。

<input type="radio" name="radioGroup" value="1" id="radio1" /><label for="radio1">Radio 1</label> 
<input type="radio" name="radioGroup" value="2" id="radio2" /><label for="radio2">Radio 2</label> 
<input type="radio" name="radioGroup" value="3" id="radio3" /><label for="radio3">Radio 3</label> 
<input type="radio" name="radioGroup" value="4" id="radio4" /><label for="radio4">Radio 4</label>

JS Fiddle demo

来源

2011-02-01 13:53:06

我知道radiobuttons，当然，但我的例子需要使用复选框，我相信对于一个组我必须能够选择2个选项等...所以复选框将是唯一的方式... – WraithLux 2011-02-01 13:55:03

我会建议使用类，而不是类型的

。

<div class="selector"> 
<input type=checkbox class="serialcheck" name="hello" value="test"/> Hello 
<input type=checkbox class="serialcheck" name="bye" value="test"/> Bye 
<input type=checkbox class="serialcheck" name="no" value="test2"/> No 
<input type=checkbox class="serialcheck" name="no no" value="test2"/> No No 
</div>

真的，你只需要选择所有，但当前射击它的人的onclick事件：

$(".selector input.serialcheck").click(function(){ 
    var test = $(this).val(); 
    $(".selector input.serialcheck[value!="+test+"]").attr('checked', false); 
});

如果要选择所有具有相同值的那些的，增加一个行：

$(".selector input.serialcheck").click(function(){ 
    var test = $(this).val(); 
    $(".selector input.serialcheck[value!="+test+"]").attr('checked', false); 
    $(".selector input.serialcheck[value="+test+"]").attr('checked', true); 
});

来源

2011-02-01 14:02:33

为什么不特林这样的：

// now its only watch to the checkbox where the name IS NOT test 
$(".selector input[type=checkbox][name!=test]").click(function(){ 
    ** 
    $(this).attr('checked', true); 
}); 

** if you only want that there is ONE selected at all time, add this code BEFORE you set the attribute checked: 
$(".selector input[type=checkbox]:checked").removeAttr('checked'); 


// when you group by you can only use it on the name not the value 
<div class="selector"> 
    <input type=checkbox value="hello" name="test"/> 
    <input type=checkbox value="bye" name="test"/> 
    <input type=checkbox value="no" name="test2"/> 
    <input type=checkbox value="no no" name="test2"/> 
</div> 

// if you want to use it more but with different value 
$(".selector input[type=checkbox]").click(function(){ 

    var currName = $(this).attr('name'); 

    //watch if there already is a checkbox checked with the same name 
    $(".selector input[type=checkbox][name="+ currName +"]:checked").removeAttr('checked'); // or .attr('checked', false); 

    // now set the checkbox you clicked on it to true 
    $(this).attr('checked', true); 
});

来源

2011-02-01 14:09:31

这是一个更清洁的版本基于以前的答案

HTML

<input type="checkbox" class="checkboxgroup" value="1"> 
<input type="checkbox" class="checkboxgroup" value="2">

的JavaScript

$('.checkboxgroup').click(function(e){ 
    var val = $(this).val(); 
    $('input[value!='+val+'].checkboxgroup').attr('checked',false); 
});

该复选框可以在页面上的任何地方，只要给它们的类checkboxgroup。

来源

2012-09-08 19:57:53 chrislovecnm

jQuery复选框组

回答

相关问题