jQuery checkbox groups

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

Я предложил бы использовать класс вместо типа

.

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

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

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.