Не могу изменить css всех флажков при нажатии на основной флажок

Question

Привет ребята,

Я пытаюсь изменить цвет фона и фона всех моих флажков в форме с помощью jQuery. Я не могу заставить его работать.

Вот так выглядит мой код:
HTML часть:

<form action="" method="">
    <div id="child1">
        <input type="checkbox" class="select-all-checkboxes" name="select-all-checkboxes" />
    </div>
    <div id="child2">
        <input type="checkbox" name="checkboxs[]" />
        <input type="checkbox" name="checkboxs[]" />
        <input type="checkbox" name="checkboxs[]" />
        <input type="checkbox" name="checkboxs[]" />
    </div>
</form>

Часть jQuery

$('form input.select-all-checkboxes:checkbox').live('click', function()
{
    if($(this).attr('checked') == true)
    {
        $(this).parent('form').children('input:checkbox').css({
            background: 'rgba(0, 255, 0, 0.5)',
            border: '1px solid green'
        });   
    }
    else
    {
        $(this).parent('form').children('input:checkbox').css({
            background: 'none',
            border: '1px solid transparent'
        });   
    }
});

Что нужно сделать, так это то, что когда вы щелкаете по флажку с классом «select-all-checkboxes», тогда все флажки в форме должны быть отмечены и иметь другую границу и фон.

Я просто не заставляю его работать. Надеюсь, вы, ребята, можете мне помочь.

Заранее спасибо,
Mark

Answer 1

Ваш селектор неверен. Вам нужно использовать parents и find. несмотря на это, правило стиля, похоже, не влияет на флажки в chrome

$(this).parents('form').find('input:checkbox')

Answer 2

HTML:

<form action="" method="">
<div id="child1">
    <input type="checkbox" class="select-all-checkboxes" name="select-all-checkboxes" />
</div>
<div id="child2">
    <input type="checkbox" class= 'child_box' name="checkboxs[]" />
    <input type="checkbox" class= 'child_box' name="checkboxs[]" />
    <input type="checkbox" class= 'child_box' name="checkboxs[]" />
    <input type="checkbox" class= 'child_box' name="checkboxs[]" />
</div>
</form>

CSS:

 .greenbox{outline:#00ff00 solid 2px;}

JQuery:

$(function(){
  $('.select-all-checkboxes').click(function(){
    $(this).parent().parent().find('.child_box').attr('checked', this.checked);
    if (this.checked == true){
      $(this).parent().parent().find('.child_box').addClass('greenbox');   
    }else{
      $(this).parent().parent().find('.child_box').removeClass('greenbox');  
    }
  });
});

Answer 3

Родитель не является непосредственным предком входов. Возможно, вы хотите изменить вызов метода children () на вызов find ().

http://api.jquery.com/find/

Answer 4

Вы пробовали:

$ ('. Select-all-checkboxes'). Click (function () {