Снимите флажок, если ни один элемент не выбран. отметьте только один флажок. изменить цвет фона соответствующего контейнера div.

Question

<div id="grand-parent" class="grand-parent"> 
     <div class="parent-div"> 
      <p> A </p> 
      <input type="checkbox" class="select-me" name="1" value="1"/> 

     </div> 
</div> 
<div id="grand-parent-1" class="grand-parent"> 
     <div class="parent-div"> 
      <p> B </p> 
      <input type="checkbox" class="select-me" name="2" value="2"/> 
    </div> 

</div 
    ><div id="grand-parent-2" class="grand-parent"> 
     <div class="parent-div"> 
      <p> C </p> 
      <input type="checkbox" class="select-me" name="3" value="3"/> 


     </div> 
</div> 


$('.select-me').change(function(){ 

    if($(this).is(':checked')) 
    { 
     $('.select-me').each(function(){ $(this).attr('checked', false); }); 
     $(this).attr('checked', true); 

     $('#grand-parent').css('background','#999'); 
    } 
    else if($(this).not(':checked')){ 
     $('.select-me').each(function(){ $(this).attr('checked', false); }); 
      $(this).attr('checked', false); 
     $('.grand-parent').css('background','green'); 
    } 
}); 

Jsfiddle http://jsfiddle.net/2XsY5/27/

мне нужна помощь, чтобы изменить цвет фона соответствующего флажка. за один раз следует выбирать только один флажок. Все невыбранные флажки должны иметь фоновый цвет по умолчанию. только нужный флажок должен иметь разный фоновый цвет. Я ценю за помощь.

Answer 1

Вы можете попробовать это, надеюсь, что это один вы ожидали!

$(function(){ 
    $('.select-me').change(function(){ 
     $this = $(this); 
     $('.select-me').each(function(){ 
      if($(this).val()==$this.val()) 
      { 
       $(this).parents('.grand-parent').css('background','#999'); 
      }else{ 
       $(this).attr('checked', false); 
       $(this).parents('.grand-parent').css('background','green'); 
      } 
     }); 

    }); 
}); 

DEMO:http://jsfiddle.net/FvN7v/

Answer 2

Я бы предложил использовать элементы radio, если вы хотите, чтобы только один элемент формы был проверен за раз.

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

$('[type=checkbox]').change(function(){ 
     $('[type=checkbox]').not(this).removeAttr('checked').parents('.grand-parent').removeClass('selected'); 
    $(this).parents('.grand-parent').addClass('selected'); 
}); 

Примечание: Обновленный демонстрационный пример, чтобы добавить класс великого родителя DIV в соответствии с просьбой, и удалить класс все входы не проверены.

Существует много способов перемещения DOM к элементам, которые вы хотите, вы можете использовать .parent().parent() или другие методы, но результат тот же.

http://jsfiddle.net/2XsY5/31/