jQuery复选框组

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

这些复选框可以在页面上的任何位置，只需给它们提供class checkboxgroup。

Answer 4

为什么不试试这个：

// 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 5

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

<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 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>