9036

How do I tick all checkboxes of the other sections by ticking a checkbox found inside the current se

Question:

The folliwing fiddle is ok, read below what I need to change at it.

<a href="http://jsfiddle.net/V5SSM/14/" rel="nofollow">http://jsfiddle.net/V5SSM/14/</a>

You click on ☑ Subsection 1.1 and then all other get clicked:

<ul><li>☑ Subsection 2.1</li> <li>☑ Subsection 2.2</li> <li>☑ Subsection 2.3</li> <li>☑ Subsection 2.4</li> <li>☑ Subsection 3.1</li> <li>☑ Subsection 3.2</li> <li>☑ Subsection 3.3</li> <li>☑ Subsection 3.4</li> </ul>

Here is the HTML tree:

Section 1

Subsection 1.1 Subsection 1.2 Subsection 1.3 Subsection 1.4

Section 2

Subsection 2.1 Subsection 2.2 Subsection 2.3 Subsection 2.4

Section 3

Subsection 3.1 Subsection 3.2 Subsection 3.3 Subsection 3.4

More Details:

You can see that the current jsfiddle example works. It works to tick all checkboxes of the current section while ticking one checkbox from inside the current section. I want it to work the same, but not to tick checkboxes of its own section, rather to tick all other checkboxes of the other sections.

Example: I select with "Subsection 1.1" all other sections that are not Section 1. "Subsection 1.1" should select all other: Subsection 2.1, Subsection 2.2, Subsection 2.3, Subsection 2.4, Subsection 3.1, Subsection 3.2, Subsection 3.3, Subsection 3.4

Answer1:

You can handle click on all checkboxes using event delegation mechanism by attaching the handler on the first common ancestor :

var type = 'input[type="checkbox"]'; $('#selectAllButton').on('click', function () { $(type).prop('checked', true).closest('label').addClass('c_on'); }); $('#selectNoneButton').on('click', function () { $(type).prop('checked', false).closest('label').removeClass('c_on'); }); // event Delegation $('#docbuilder').click(function(e){ var $t = $(this), $tar = $(e.target); // The node that has been clicked // If checkbox if($tar.is(type)){ var cbRemaining = $tar.closest('blockquote').find(type+':checked').length, /* counting how many checked checkboxes remain inside the current section */ $otherCb = $t.children(':nth-child(n+3)').not($tar.closest('.document')[0]).find(type), /* Retrieve all checkboxes except the ones that belong to the current section */ state = $tar.prop('checked'); // get the checked property of the checkbox beiing clicked // If subsection checkbox if($tar.closest('.subsection').length){ if( !cbRemaining ){ $tar.closest('blockquote').prev().find(type).prop('checked', false); } if( !cbRemaining || cbRemaining==1 && state){ $otherCb.prop('checked', state); } $tar.parent()[(state ? 'addClass':'removeClass')]('c_on'); // should we add or remove the color class on the checkbox label // If section checkbox } else if($tar.closest('.section').length){ if(state) $otherCb.prop('checked', false); $tar.parent().siblings().find(type).prop('checked', state) .parent()[(state ? 'addClass':'removeClass')]('c_on'); } } });

You may need to modify this code a bit accordingly to some constraints not yet taken into account.

Recommend

  • Jquery .delay().fadeOut cancel/clear queue.. Is it possible? How?
  • Quartz.net + testing with SystemTime.UtcNow
  • kill process/ end process of bluestacks
  • Restricted profiles settings not being remembered
  • symfony 2 phpunit - how to untick checkbox in form field
  • ScheduledThreadPoolExecutor only “ticking” once
  • Getting the result of the promise returned by an asyncValidator
  • Insert Pandas dataframe into Cassandra Table
  • Integrate two requests into one Javascript
  • How to display the hotel names that have the maximum count from data base by calculating sum in PHP?
  • jquery add an event handler to objects in an array
  • How to move axis labels automatically in rgl R
  • How do I deploy my Node.js app with a opencv4nodejs dependency to Heroku?
  • SSRS 2008 - Sorting within a group
  • UI-GRID column summation on checkbox change
  • iOS custom UTI in UIDocumentPickerViewController initWithDocumentTypes
  • What do I do with this error when I run tests in rails?
  • How do I add a UIAlertController in app delegate (obj-c)
  • Why does IE8 fail to resolve my JQuery selector for a checked radio option?
  • Unicorn and Rails eat up 2x MySQL connections
  • How to name a 'group' check box in Adobe Reader when wanting to fill form by FDF / XFDF
  • What is the reason that Policy.getPolicy() is considered as it will retain a static reference to the
  • Is there any purpose for h2-h6 headings in HTML5?
  • Segmentation Fault on MySQL2 / Ruby 1.9.3 / Rails 3.2
  • Where these are stored?
  • Add reference to ASP.NET 5 Class Library from Framework 4.5 Class Library Project
  • Aptana 3 remove bundle (jquery)
  • How do I retrieve the user information of a user authenticated with Apache's mod_ldap?
  • Primefaces ManyCheckbox inside ui:repeat calls setter method only for last loop
  • Uncaught TypeError: $(…).select2 is not a function
  • Angularjs pass function from Controller to Directive (or call controller function from directive) -
  • Lost migrations and Azure database is now out of sync
  • Master page gives error
  • SSO with signing and signature validation doesn't work
  • Why is the timeout on a windows udp receive socket always 500ms longer than set by SO_RCVTIMEO?
  • R: gsub and capture
  • jqPlot EnhancedLegendRenderer plugin does not toggle series for Pie charts
  • Comma separated Values
  • Matrix multiplication with MKL
  • How to load view controller without button in storyboard?