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

в JSFIDDLE

Answer 2

Это более чистая версия, основанная на предыдущих ответах

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.

Answer 3

Как отмечает @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 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);
});