подсчета числа флажков проверили

Question

У меня есть некоторые HTML, как это:

<div id="SomeID"> 
<div class="Wrapper"> 
    <input type="checkbox" class="SomeCheckboxClass"> 
    <input type="checkbox" class="SomeCheckboxClass"> 
    <input type="checkbox" class="SomeCheckboxClass"> 
</div> 

<div class="Wrapper"> 
    <input type="checkbox" class="SomeCheckboxClass"> 
    <input type="checkbox" class="SomeCheckboxClass"> 
    <input type="checkbox" class="SomeCheckboxClass"> 
</div> 
</div> 

Когда пользователь нажимает на флажке, я хочу, чтобы очистить все соседние флажки в родительском Упаковочных делах. В принципе, я хочу, чтобы в любой момент времени был выбран один SomeCheckboxClass на упаковку. На данный момент я написал следующее:

$('#SomeID').on({ 

    change: function() { 

     if ($(this).attr('checked') === 'checked') { 

     var TheIndex = $(this).index(); 

     $(this).parent().find('.SomeCheckboxClass').each(function() { 

      if ($(this).index() !== TheIndex) { 
       $(this).attr('checked', false); 
      } 
     }); 
     } 
    } 
}, '.SomeCheckboxClass'); 

Есть ли более простой способ сделать это? Проведя некоторое время, я думаю, что это будет более простой способ. Обратите внимание, что HTML создается во время выполнения. Дайте мне знать, если есть легче/лучше/быстрее.

Спасибо.

Answer 1

Вы можете использовать siblings():

var $this = $(this); 
if ($this.is(":checked")) { 
    $this.siblings().prop("checked", false); 
} 

Answer 2

Следующие даст вам количество выбранных флажков, так как ваш вопрос название спрашивает:

$("#SomeID .Wrapper input.SomeCheckboxClass:checked").length 

http://jsfiddle.net/d9KcH/

Однако, как @dunsmoreb предложил, вы должны использовать список кнопки радио, чтобы получить этот своего рода функциональность.

Answer 3

Кажется, вы пытаетесь воспроизвести функцию переключателя. Радиокнопка позволяет одновременно проверять одно значение. Вот пример.

<input type="radio" name="group1" value="Hello"> 
<input type="radio" name="group1" value="Hey"> 
<input type="radio" name="group1" value="Yo"> 

Вы можете выбрать только одну кнопку для каждой группы, указанную в названии.

Примечание: Если вы хотите переключатели, которые выглядят как флажки, то this answer поможет.

Answer 4

Нет подсчета необходимо:

​$(":checkbox").on("change", function(){ 
    this.checked && $(this).siblings().prop("checked", false); 
});​​​​​​​​​​​​​​​​​​​​​​ 

Fiddle: http://jsfiddle.net/jonathansampson/82QcL/2/

Answer 5

Вот быстрый попытка:

if($(this).is(':checked')) { 
    $(this).parent().find('.SomeCheckboxClass').not(this).attr('checked', false); 
} 

Возможно, вам придется немного подкорректировать его.

Answer 6

$('#SomeID').on({ 
    change: function() { 
     if(this.checked){ 
     $(this).siblings(':checkbox').prop('checked', false); 
     } 
    } 
}, '.SomeCheckboxClass'); 

DEMO 1

Но если вы хотите, чтобы снять все флажки, то

$('#SomeID').on({ 
    change: function() { 
     $('.SomeCheckboxClass:checkbox').not(this).prop('checked', false); 
    } 
}, '.SomeCheckboxClass'); 

DEMO 2

Answer 7

Я хотел бы отделить выбор из акта проверки, если установлен флажок.Читает лучше я думаю:

$("input[type=checkbox]").is(":checked").length; 

Answer 8

Попробуйте, как показано ниже,

$('#SomeID').on({ 
    change: function() { 
     if (this.checked) { 
     $(this)    
      .siblings('.SomeCheckboxClass') 
      .prop('checked', false); 
     } 
    } 
}, '.SomeCheckboxClass'); 

DEMO:http://jsfiddle.net/82QcL/3/