Thursday 15 September 2011

checkbox - jquery removeClass only if all checkboxes of the same set (with same class?) are unchecked -


problem

When a checkbox is unchecked, other checkboxes of the same set (same class With)?) Is examined, the class should not be removed. Please note that there are several sets of checkboxes.

(partially working bella)

html code
   Bu1 & lt; / Label & gt; & Lt; / Li & gt; & Lt; Li class = "word object" & gt; & Lt; Label & gt; & Lt; Input type = "checkbox" name = "qmt [clipping_bu] []" value = "27" check = "check" /> Bu2 & lt; / Label & gt; & Lt; / Li & gt; & Lt; Li class = "word object" & gt; & Lt; Label & gt; & Lt; Input type = "checkbox" name = "qmt [clipping_bu] []" value = "31" /> Bu3 & lt; / Label & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Div & gt; & Lt; Div class = "btn-group classification-search-btn" id = "terms-clipping_market" & gt; & Lt; A class = "BTN dropdown-toggle" data-toggle = "dropdown" href = "#" & gt; Market & lt; Duration class = "carat" & gt; & Lt; / Span & gt; & Lt; / A & gt; & Lt; Ul class = "dropdown menu" & gt; & Lt; Li class = "word object" & gt; & Lt; Label & gt; & Lt; Input type = "checkbox" name = "qmt [clipping_market] []" value = "34" /> UK < / Label & gt; & Lt; / Li & gt; & Lt; Li class = "term-item current-period" & gt; & Lt; Label & gt; & Lt; Input type = "checkbox" name = "qmt [clipping_market] []" value = "57" check = "check" /> gt; France & lt; / Label & gt; & Lt; / Li & gt; & Lt; Li class = "term-item current-period" & gt; & Lt; Label & gt; & Lt; Input type = "checkbox" name = "qmt [clipping_market] []" value = "65" check = "check" /> Germany & lt; / Label & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Div & gt; & Lt; P & gt; & Lt; Input class = "btn btn-primary" type = "submit" value = "submit" /> & Lt; A class = "classification-drilldown-reset BTN BTN-info" href = "#" & gt; Reset & lt; / A & gt; & Lt; / P & gt; & Lt; / Form & gt;   

javascript
  jQuery (document) .ready (function ($) {// verify that any checkbox is checked, if so Then highlight the dropdown link $ (': checkbox: check'). (Function () {var $ check = $ (this), $ ul = $ check.parents ('ul.dropdown-menu'), $ div = $ Ul.siblings ('A.btn.dropdown-toggle'); if ($ check.prop ('checked')) {$ div.addClass ('btn-warning');}}) // check box each On click ... $ ('.taxonomy-drilldown-checkboxes input [type = checkbox]') .change (function () {var $ check2 = $ (this), $ ul = $ check2.parents ('ul.drop ($ Check2.prop ('checked')), $ div = $ ul.siblings ('a.btn.dropdown-toggle'); // If a checkbox highlights a dropdown link, {$ Div.addClass ('btn-alert'); // If removing a checkbox, remove the class // Only when all the checkboxes * will be unchecked * of the same set] and {$ div.removeClass (' Btn-warning ');}}};});   

CSS

No Fancy!

  .btn-warning {background color: # faa732; }    

You almost did it, you just have to check if there is still a checkbox Instead of:

  Other {$ div.removeClass ('btn-warning'), you were checked when unchecking one; }   

you entered

  else if ($ ul.find ('input [type = "checkbox"]: checked'). Length == 0) {$ Div.removeClass ('BTN-Warning'); }   

This will find the number of checkboxes checked in the current UL, and if it is equal to 0, then remove the class. Example:

No comments:

Post a Comment