Question

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

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

Answer 1

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

如果您想要只有一个答案，则必须使用单选按钮。这是标准。

如果你坚持原来的方式，那就是正确的代码：

$(".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

Answer 2

正如@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

Answer 3

这是一个基于之前答案的更干净的版本

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);
});

复选框可以在页面的任何位置，只需给它们类复选框组。

Answer 4

我建议使用类而不是类型。

<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);
});

Answer 5

为什么不这样做：

// 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);
});

Answer 6

这也可以，而且更短。

jQuery

var lang = [];

$('.language').on('change', function(){
    lang = [];
    $.each($("input[name='language']:checked"), function(){
        lang.push($(this).val());
    });
});

HTML

<fieldset class="language">
    <label>
        <input type="checkbox" name="language" value="arabic">
        <span>Arabic</span>
    </label>
    <label>
        <input type="checkbox" name="language" value="bangla">
        <span>Bangla</span>
    </label>
    <label>
        <input type="checkbox" name="language" value="english">
        <span>English</span>
    </label>
</fieldset>

jQuery复选框组

6 个答案: