3

Hello I am making a script to check all slave checkboxes related to master checkbox. This will be done using classes. So master checkboxes will have classes like "master1", "master2" etc.. The related slave checkboxes gonna have "slave1" class (related to master1), "slave2" (related to master2) etc..

so I'll begin with:

jQuery('.checks_div input[type="checkbox"].^="master"').click(function(){

So when the master was clicked I want to choose all related slave and check them. But how?

Thanks

Dima
  • 33
  • 1
  • 6

2 Answers2

3
$('input[type="checkbox"][class^="master"]').on("click",function(){})

but delegating is better

$(document.body).on('click','input[type="checkbox"][class^="master"]',function(){})

then inside the click function & if you have your slaves in an adjacent div to the master checkbox

var $slaves=$(this).next().find('input[type="checkbox"][class*="slave"]')

if html is different well come out with a way to select those slaves from this $(this) that is the box just checked

once your slaves are in a jquery object, to check them :

$slaves.prop('checked', true);

see Setting "checked" for a checkbox with jQuery?

if you do nothing else than check them you don't even need to cache your slaves in a jquery object 

 $(this).//chain to select slaves
        .prop('checked', true)
Community
  • 1
  • 1
mikakun
  • 2,203
  • 2
  • 16
  • 24
  • I made this code: $(document.body).on('click','input[type="checkbox"][class^="master"]',function(){ var $slaves=$(this).next().find('input[type="checkbox"][class*="slave"]'); $($slaves).click(); /*$('input[class^="slave"]').click();*/ }); It does not work. The slaves are just the next input, but there are br's and labels.. Don't really understand what "$" does in $slaves.. – Dima Jan 30 '13 at 14:40
  • @Dima the $ does nothing at all except reminding that this variable is a jquery object, so just a naming convention to clarify code; then since it is a jquery object you don't `$($slaves)` you can `$slaves.trigger("click")` (which won't do much except if you have some click events bind to them). show html with at least a couple of 'master' & their 'slaves' – mikakun Jan 30 '13 at 18:31
0

Well here is the code I came to:

$(document.body).on('click','input[type="checkbox"][class^="master"]',function(){
  var slaves = $(this).next('label').next('div.slaves').find('input[type="checkbox"][class*="slave"]');
  var master = $(this);
  $(slaves).attr('checked', $(this).is(':checked'));
});

This works great. Although I found what maybe a bug in jquery version 1.9.0 and up. here: http://jsfiddle.net/x3NpL/

1.8.3 works fine, if u go higher it will work twice and stop working.. Very odd. Btw this does not happen if $(slaves).click() is used, but click() does not have the desired outcome.

Anyway the solution that I used is to add a div to encompass the relevant slaves, but I would still like to know how to do it without the div. The idea is simple: catch the click on master, get its class number (master14 - number 14 etc..), check all slaves with this number (slave14). I just don't get how to get the number from it, considering the fact that the class may hold more than one class, like class="class1 class2 master14" ..

Thanks

Dima
  • 33
  • 1
  • 6
  • hey, you were supposed to accept my answer not to publish one copy/pasting my code (with mistakes this `$(slaves)` as explained above...) – mikakun Jun 23 '14 at 09:13