, если все флажки отмечены в JQuery аккордеон изменить h3 bg

Question

Я рассмотрел многие другие вопросы, ничего подобного, как эта проблема. У меня есть аккордеон JQuery с 5 вкладками. Внутри каждой вкладки есть несколько флажков, и мне нужно h3 в верхней части div, чтобы изменить цвет, если все флажки отмечены. поэтому, когда он рухнет, пользователь может легко определить, какие вкладки по-прежнему требуют внимания.

Ток Jquery Я попытался это

function changeH3(){ 
$('h3').on('click',function(){ 
    var boxes = $('.checkbox[type="checkbox"]'); 
    if (boxes.length === boxes.filter(':checked').length) { 
     $(this).closest('h3') 
     .toggleClass('bg-warning') 
     .toggleClass('bg-success'); 

    } 
}); 
} 

бы лучше, если это только что произошло, а не нуждаясь в OnClick, а также.

верхняя панель выглядит так, а остальные практически одинаковы. Его все Bootstrap CSS

<div id= "acc1" > 
    <form role="form" action="run.php" method="post" name='details'> 

    <fieldset class="form-horizontal form-group bg-info"> 
     <input type="checkbox" class="box " name="checkBox[]" id="1" onClick="checkval(this)" <?php echo $boxes[1] ? 'checked = "checked"' : '' ?>>Inspected 
    </fieldset> 

    <fieldset class="form-horizontal form-group bg-info"> 
     <input type="checkbox" class="box " name="checkBox[]" id="2" onClick="checkval(this)"<?php echo $boxes[2] ? 'checked = "checked"' : '' ?>>All 
    </fieldset> 

    <fieldset class="form-horizontal form-group bg-info"> 
     <input type="checkbox" class="box " name="checkBox[]" id="3" onClick="checkval(this)"<?php echo $boxes[3] ? 'checked = "checked"' : '' ?>>All 
    </fieldset> 

    <fieldset class="form-horizontal form-group bg-info"> 
     <input type="checkbox" class="box " name="checkBox[]" id="4" onClick="checkval(this)"<?php echo $boxes[4] ? 'checked = "checked"' : '' ?>>aligns 
    </fieldset> 

    <fieldset class="form-horizontal form-group bg-info"> 
     <input type="checkbox" class="box " name="checkBox[]" id="5" onClick="checkval(this)"<?php echo $boxes[5] ? 'checked = "checked"' : '' ?>>and 
    </fieldset> 

    <fieldset class="form-horizontal form-group bg-info"> 
     <input type="checkbox" class="box " name="checkBox[]" id="6" onClick="checkval(this)"<?php echo $boxes[6] ? 'checked = "checked"' : '' ?>> match 
    </fieldset> 

    <fieldset class="form-horizontal form-group bg-info"> 
     <input type="checkbox" class="box " name="checkBox[]" id="7" onClick="checkval(this)"<?php echo $boxes[7] ? 'checked = "checked"' : '' ?>>free 
    </fieldset> 

    <fieldset class="form-horizontal form-group bg-info"> 
     <input type="checkbox" class="box " name="checkBox[]" id="8" onClick="checkval(this)"<?php echo $boxes[8] ? 'checked = "checked"' : '' ?>>Front 
    </fieldset> 

    <fieldset class="form-horizontal form-group bg-info"> 
     <input type="checkbox" class="box " name="checkBox[]" id="9" onClick="checkval(this)"<?php echo $boxes[9] ? 'checked = "checked"' : '' ?>>Weather 
    </fieldset> 

    <fieldset class="form-horizontal form-group bg-info"> 
     <input type="checkbox" class="box " name="checkBox[]" id="10" onClick="checkval(this)"<?php echo $boxes[10] ? 'checked = "checked"' : '' ?>>Key 
    </fieldset> 

    <textarea class= "form-control notes" name="notes[]" data-num="1" onChange="getVal(this)" placeholder = "If any of the above items were , etc."><?php echo $notes[1] ? $notes[1] : '' ?></textarea> 

</div> 

Answer 1

Я бы рассмотрел возможность запуска этого действия при щелчке флажка. При щелчке вы можете перенести до родительского контейнера флажка и выбрать все флажки. Проверка того, что селектор .length будет содержать # из количества полных флажков на этой панели. Затем выберите все флажки, которые: отмечены. Сравнивая оба результата .length, вы можете определить, нуждается ли h3 в изменении класса.

$('input[type="checkbox"]').click(function (event) { 
    $target = $(this); 
    $parent = $target.closest('.panel') // this selector may be incorrect 
    $h3 = $target.find('h3'); 
    $checkboxes = $parent.find('input[type="checkbox"]'); 
    $checked = $parent.find('input[type="checkbox"]:checked'); 

if ($checked.length == $checkboxes.length) { 
    $h3.addClass('bg-success'); 
    $h3.removeClass('bg-warning'); 
    } else { 
    $h3.removeClass('bg-success'); 
    $h3.addClass('bg-warning'); 
    } 
}); 

Answer 2

Я хотел бы предложить следующий подход:

// caching the <input> elements of 'type=checkbox': 
 
var checkboxes = $('input[type=checkbox]'); 
 

 
// binding the anonymous function of the on() method as the 
 
// change event-handler: 
 
checkboxes.on('change', function() { 
 

 
    // checking that the length of the checboxes collection is 
 
    // equal to the length of checked checkboxes: 
 
    let check = checkboxes.length === checkboxes.filter(':checked').length; 
 

 
    // finding the closest ancestor <div> from amongs the ancestors of 
 
    // the changed check-box element, and finding its direct child(ren) 
 
    // <h3> elements (ideally a more specific selector should be used, 
 
    // such as a class, id or data-* attribute): 
 
    $(this).closest('div').find('>h3') 
 
    // removing both the 'bg-warning' and 'bg-success' 
 
    // classes from that <h3> 
 
    .removeClass('bg-warning bg-success') 
 
    // using a ternary conditional operator to 
 
    // add the 'bg-success' class (if the check is true/truthy) 
 
    // or the 'bg-warning' class (if the check is false/falsey): 
 
    .addClass(check ? 'bg-success' : 'bg-warning'); 
 
    // triggering the change event - and thereby causing the change 
 
    // event-handler to fire - on page-load/document-ready: 
 
}).change();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<div id="acc1"> 
 
    <h3> 
 
    &lt;h3&gt; tag, for demo purposes (omitted from question's) HTML 
 
</h3> 
 
    <form role="form" action="run.php" method="post" name='details'> 
 

 
    <fieldset class="form-horizontal form-group bg-info"> 
 
     <input type="checkbox" class="box " name="checkBox[]" id="1" />Inspected 
 
    </fieldset> 
 

 
    <fieldset class="form-horizontal form-group bg-info"> 
 
     <input type="checkbox" class="box " name="checkBox[]" id="2" />All 
 
    </fieldset> 
 

 
    <!-- note that, here, I removed an apparent duplicate 'All' check-box --> 
 

 
    <fieldset class="form-horizontal form-group bg-info"> 
 
     <input type="checkbox" class="box " name="checkBox[]" id="4" />aligns 
 
    </fieldset> 
 

 
    <fieldset class="form-horizontal form-group bg-info"> 
 
     <input type="checkbox" class="box " name="checkBox[]" id="5" />and 
 
    </fieldset> 
 

 
    <fieldset class="form-horizontal form-group bg-info"> 
 
     <input type="checkbox" class="box " name="checkBox[]" id="6" />match 
 
    </fieldset> 
 

 
    <fieldset class="form-horizontal form-group bg-info"> 
 
     <input type="checkbox" class="box " name="checkBox[]" id="7" />free 
 
    </fieldset> 
 

 
    <fieldset class="form-horizontal form-group bg-info"> 
 
     <input type="checkbox" class="box " name="checkBox[]" id="8" />Front 
 
    </fieldset> 
 

 
    <fieldset class="form-horizontal form-group bg-info"> 
 
     <input type="checkbox" class="box " name="checkBox[]" id="9" />Weather 
 
    </fieldset> 
 

 
    <fieldset class="form-horizontal form-group bg-info"> 
 
     <input type="checkbox" class="box " name="checkBox[]" id="10" />Key 
 
    </fieldset> 
 

 
    <textarea class="form-control notes" name="notes[]" data-num="1" onChange="getVal(this)" placeholder="If any of the above items were , etc."></textarea> 
 
    </form> 
 
</div>

JS Fiddle demo.

Этот подход присваивает правильный класс (bg-warning/bg-success) на странице-нагрузка/готовность к документу.

Кстати, с точки зрения пользовательского интерфейса, было бы хорошей практикой, чтобы обернуть соответствующий текст каждого <input> в <label> тег либо сопоставляющего, что <label> используя его for атрибут:

<input id="1" type="checkbox" /> 
<label for="1">Label for input 1</label> 

или просто обернув <input> в то же <label> в тексте:

<label> 
    <input id="1" type="checkbox/>Label for input 1 
</label> 

Это позволяет пользователю изменять состояние флажка, нажав на связанный с ним текст (что увеличивает полезную площадь попадания для мыши или сенсорного взаимодействия):

// caching the <input> elements of 'type=checkbox': 
 
var checkboxes = $('input[type=checkbox]'); 
 

 
// binding the anonymous function of the on() method as the 
 
// change event-handler: 
 
checkboxes.on('change', function() { 
 

 
    // checking that the length of the checboxes collection is 
 
    // equal to the length of checked checkboxes: 
 
    let check = checkboxes.length === checkboxes.filter(':checked').length; 
 

 
    // finding the closest ancestor <div> from amongs the ancestors of 
 
    // the changed check-box element, and finding its direct child(ren) 
 
    // <h3> elements (ideally a more specific selector should be used, 
 
    // such as a class, id or data-* attribute): 
 
    $(this).closest('div').find('>h3') 
 
    // removing both the 'bg-warning' and 'bg-success' 
 
    // classes from that <h3> 
 
    .removeClass('bg-warning bg-success') 
 
    // using a ternary conditional operator to 
 
    // add the 'bg-success' class (if the check is true/truthy) 
 
    // or the 'bg-warning' class (if the check is false/falsey): 
 
    .addClass(check ? 'bg-success' : 'bg-warning'); 
 
    // triggering the change event - and thereby causing the change 
 
    // event-handler to fire - on page-load/document-ready: 
 
}).change();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<div id="acc1"> 
 
    <h3> 
 
    &lt;h3&gt; tag, for demo purposes (omitted from question's) HTML 
 
</h3> 
 
    <form role="form" action="run.php" method="post" name='details'> 
 

 
    <fieldset class="form-horizontal form-group bg-info"> 
 
     <label> 
 
     <input type="checkbox" class="box " name="checkBox[]" id="1" />Inspected</label> 
 
    </fieldset> 
 

 
    <fieldset class="form-horizontal form-group bg-info"> 
 
     <label> 
 
     <input type="checkbox" class="box " name="checkBox[]" id="2" />All</label> 
 
    </fieldset> 
 

 
    <!-- note that, here, I removed an apparent duplicate 'All' check-box --> 
 

 
    <fieldset class="form-horizontal form-group bg-info"> 
 
     <label> 
 
     <input type="checkbox" class="box " name="checkBox[]" id="4" />aligns</label> 
 
    </fieldset> 
 

 
    <fieldset class="form-horizontal form-group bg-info"> 
 
     <label> 
 
     <input type="checkbox" class="box " name="checkBox[]" id="5" />and</label> 
 
    </fieldset> 
 

 
    <fieldset class="form-horizontal form-group bg-info"> 
 
     <label> 
 
     <input type="checkbox" class="box " name="checkBox[]" id="6" />match</label> 
 
    </fieldset> 
 

 
    <fieldset class="form-horizontal form-group bg-info"> 
 
     <label> 
 
     <input type="checkbox" class="box " name="checkBox[]" id="7" />free</label> 
 
    </fieldset> 
 

 
    <fieldset class="form-horizontal form-group bg-info"> 
 
     <label> 
 
     <input type="checkbox" class="box " name="checkBox[]" id="8" />Front</label> 
 
    </fieldset> 
 

 
    <fieldset class="form-horizontal form-group bg-info"> 
 
     <label> 
 
     <input type="checkbox" class="box " name="checkBox[]" id="9" />Weather</label> 
 
    </fieldset> 
 

 
    <fieldset class="form-horizontal form-group bg-info"> 
 
     <label> 
 
     <input type="checkbox" class="box " name="checkBox[]" id="10" />Key</label> 
 
    </fieldset> 
 
    <textarea class="form-control notes" name="notes[]" data-num="1" placeholder="If any of the above items were , etc."></textarea> 
 
    </form> 
 
</div>

JS Fiddle demo.

Кроме того, вышесказанное также может быть легко экспортировано в обычный JavaScript, хотя bootstrap.js требует, чтобы jQuery функционировал, но если вы не используете загрузчик.JS, и для тех, кто хочет, чтобы включить эту функцию в будущем без использования JQuery, нижеследующее может быть жизнеспособным вариантом:

// declaring the function to act as the event-handler for the 
 
// change-event; instantiating the opts variable as an Object 
 
// in the event that no opts Object is passed to the function: 
 
function conditionalToggleClass(opts = {}) { 
 

 
    // defining the default settings for the function: 
 
    let settings = { 
 
    // the default element to style should none be passed-in: 
 
    'targetElement': document.querySelector('body'), 
 
    // the default class if the switch is true/truthy: 
 
    'trueClass': 'success', 
 
    // the default class if the switch is false/falsey: 
 
    'falseClass': 'warning', 
 
    // the default state of the 'switch': 
 
    'switch': true 
 
    }; 
 

 
    // obtaining an Array of keys from the opts Object, using 
 
    // Object.keys(), and iterating over that array of keys using 
 
    // Array.prototype.forEach(). 
 
    // Here we use the Arrow syntax to update the settings[key] 
 
    // property value to that held in the opts[key] property-value: 
 
    Object.keys(opts).forEach(key => settings[key] = opts[key]); 
 

 
    // if we recieve a string in place of a node in the settings.targetElement 
 
    // Object we use document.querySelector() to find the first, if any, matching 
 
    // elements within the document; otherwise we use the node directly: 
 
    let target = 'string' === typeof settings.targetElement ? document.querySelector(settings.targetElement) : settings.targetElement; 
 

 
    // if the settings.switch is true/truthy we add the settings.trueClass 
 
    // to the node, if it's false/falsey we remove that class: 
 
    target.classList.toggle(settings.trueClass, settings.switch); 
 

 
    // here we remove the settings.falseClass if the switch is true/truthy 
 
    // by using the ! operator to invert the switch's state, and add the 
 
    // class if the switch is false: 
 
    target.classList.toggle(settings.falseClass, !settings.switch); 
 
} 
 

 
// using document.querySelectorAll() to retrieve all <input> elements of 
 
// that type and using Array.from() to convert that nodeList into an Array: 
 
let checkboxes = Array.from(document.querySelectorAll('input[type=checkbox]')), 
 

 
    // defining a new Event in order to fire that event to 
 
    // set up the background-colour of the <h3> - or associated - 
 
    // element on page-load: 
 
    change = new Event('change'); 
 

 
// iterating over the Array of check-boxes using Array.prototype.forEach() 
 
// to bind the event-handling function with EventTarget.addEventListener(); 
 
// to do this we use ES6 Arrow syntax: 
 
checkboxes.forEach(check => check.addEventListener('change', function() { 
 
    // here we call the function, and pass the opts Object: 
 
    conditionalToggleClass({ 
 
    // we find the closest ancestor <div> element to the changed 
 
    // node, and then within that node we find the first/only <h3> element 
 
    // (as before the selector should be improved via class or id): 
 
    'targetElement': this.closest('div').querySelector('h3'), 
 

 
    // we set the class for when the switch is true: 
 
    'trueClass': 'bg-success', 
 
    // and for when the switch is false: 
 
    'falseClass': 'bg-warning', 
 

 
    // here we pass the switch state itself, by checking that the 
 
    // number of checkboxes is equal to the number of checked check-boxes 
 
    // (using Array.prototype.filter() to retain only the checked check-boxes): 
 
    'switch': checkboxes.length === checkboxes.filter(check => check.checked).length 
 
    }); 
 
})); 
 

 
if (checkboxes.length) { 
 
    checkboxes[0].dispatchEvent(change); 
 
}

.success { 
 
    background-color: limegreen; 
 
} 
 
.warning { 
 
    background-color: red; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div id="acc1"> 
 
    <h3> 
 
    &lt;h3&gt; tag, for demo purposes (omitted from question's) HTML 
 
</h3> 
 
    <form role="form" action="run.php" method="post" name='details'> 
 

 
    <fieldset class="form-horizontal form-group bg-info"> 
 
     <label> 
 
     <input type="checkbox" class="box " name="checkBox[]" id="1" />Inspected</label> 
 
    </fieldset> 
 

 
    <fieldset class="form-horizontal form-group bg-info"> 
 
     <label> 
 
     <input type="checkbox" class="box " name="checkBox[]" id="2" />All</label> 
 
    </fieldset> 
 

 
    <!-- note that, here, I removed an apparent duplicate 'All' check-box --> 
 

 
    <fieldset class="form-horizontal form-group bg-info"> 
 
     <label> 
 
     <input type="checkbox" class="box " name="checkBox[]" id="4" />aligns</label> 
 
    </fieldset> 
 

 
    <fieldset class="form-horizontal form-group bg-info"> 
 
     <label> 
 
     <input type="checkbox" class="box " name="checkBox[]" id="5" />and</label> 
 
    </fieldset> 
 

 
    <fieldset class="form-horizontal form-group bg-info"> 
 
     <label> 
 
     <input type="checkbox" class="box " name="checkBox[]" id="6" />match</label> 
 
    </fieldset> 
 

 
    <fieldset class="form-horizontal form-group bg-info"> 
 
     <label> 
 
     <input type="checkbox" class="box " name="checkBox[]" id="7" />free</label> 
 
    </fieldset> 
 

 
    <fieldset class="form-horizontal form-group bg-info"> 
 
     <label> 
 
     <input type="checkbox" class="box " name="checkBox[]" id="8" />Front</label> 
 
    </fieldset> 
 

 
    <fieldset class="form-horizontal form-group bg-info"> 
 
     <label> 
 
     <input type="checkbox" class="box " name="checkBox[]" id="9" />Weather</label> 
 
    </fieldset> 
 

 
    <fieldset class="form-horizontal form-group bg-info"> 
 
     <label> 
 
     <input type="checkbox" class="box " name="checkBox[]" id="10" />Key</label> 
 
    </fieldset> 
 
    <textarea class="form-control notes" name="notes[]" data-num="1" placeholder="If any of the above items were , etc."></textarea> 
 
    </form> 
 
</div>

JS Fiddle demo.

Пожалуйста, обратите внимание, что все эти подходы используют ES6 функции, такие как: let, в то время как другие, такие, как последний также использовать функции со стрелками, Array.from() и несколько экспериментальных функций, таких как Element.closest() найти ближайшего предка, соответствующий данной селектор (это, однако, простой JavaScript, а не метод jQuery, несмотря на (почти) идентичный синтаксис и функциональность).

Ссылки:

• CSS:
  • CSS Attribute selectors.
• JavaScript:
  • Array.from().
  • Array.prototype.filter().
  • Array.prototype.forEach().
  • Array.createEvent().
  • Arrow functions.
  • Conditional (ternary) Operator: assessment ? ifTrue : ifFalse;.
  • document.querySelector().
  • document.querySelectorAll().
  • Element.classList.
  • Element.closest().
  • EventTarget.addEventListener().
  • EventTarget.dispatchEvent().
  • let.
  • Object.keys().
  • typeof operator.
• JQuery:
  • addClass().
  • change().
  • closest().
  • filter().
  • find().
  • on().
  • removeClass().