asked on

JQuery problem

My problem :
----------------
I want to solve this problem using JQuery.
I have a simple checkbox for Select ALL .
When I click on this , I want to click all the checkboxes with class checkboxtobeChecked

I tried this way, however the following code does not work

$(".checkboxtobeChecked").bind("click", function(){
this.click() ;
});

Open in new window

This does not work . whats wrong ?

Do I need to use each() method here ? I'm not sure how to use each() method here.

Could you please help at this part ?

leakim971

Try :

$(".checkboxtobeChecked").bind("click", function(){
      $(".checkboxtobeChecked").attr('checked', true);
});

Open in new window

leakim971

Or :

$(".checkboxtobeChecked").bind("click", function(){
      $(".checkboxtobeChecked").each(function() {
          $(this).attr('checked', true);
      });
});

Open in new window

cofactor

ASKER

No , wrong.
I said I want to click ...... Not checked .
I want to use click instead of checked because those checkboxes have cascading action.

leakim971

Try :

$(".checkboxtobeChecked").bind("click", function(){
      $(this).removeClass("checkboxtobeChecked").addClass("tempClass");
      $(".checkboxtobeChecked").removeClass("checkboxtobeChecked").addClass("activeClass").click().removeClass("activeClass").addClass("checkboxtobeChecked");
      $(this).removeClass("tempClass").addClass("checkboxtobeChecked");
});

Open in new window

Michel Plungjan

I am not super in jQuery, but don't you want this?

$("#checkAll").bind("click", function(){ // when the checkall is clicked
  $(".checkboxtobeChecked").each(function() { // loop over all checkboxtobeChecked
    $(this).attr('checked', $("#checkAll").checked); // check or uncheck them according to the checkall
    $(this).onclick(); // run the onclick to execute 
  });
});

Open in new window

leakim971

Hello Master @mplungjan,

If it may help @cofactor have an other post similar to this one here : https://www.experts-exchange.com/questions/26301019/How-to-focus-on-the-clicked-a-tag.html

Best Regards.

hielo

To correct what you posted, it should be:
$(this).click();

NOT:
this.click();

click() is a method of a jQuery object.

>>When I click on this , I want to click all the checkboxes with class checkboxtobeChecked
Read comments in code.

Regards,
Hielo

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script language="JavaScript" type="text/javascript">
$(function(){
	$('#all').bind('click',function(){

		//based on your description:
		//	"When I click on this , I want to  click  all the checkboxes with class  checkboxtobeChecked"
		//this is what you should actually be doing
		$('.checkboxtobeChecked').click();


		/*
		//this is basically what you have so far, but is different from what you described!
		$('.checkboxtobeChecked').bind('click',function(){
			$(this).click();
		});
		*/
	});
});
</script>

</head>
<body>
<div><input type="checkbox" id='all'/>Check All</div>
<div><input type="checkbox" class='checkboxtobeChecked' value='alpha' onclick='alert(this.value)'/>Alpha</div>
<div><input type="checkbox" class='checkboxtobeChecked' value='beta' onclick='alert(this.value)'/>Beta</div>
<div><input type="checkbox" class='checkboxtobeChecked' value='gamma' onclick='alert(this.value)'/>Gamma</div>
</body>
</html>

Open in new window

Eduardo Ciciliato

The correct is:

$("#checkAll").bind("click", function(){
  $(".checkboxtobeChecked").each(function() {
    if($(this).attr('checked')=="checked"){
        $(this).removeAttr('checked');
    }else{
        $(this).attr('checked', 'checked');
  });
});

Open in new window

Michel Plungjan

esmagadores That does not make any sense.

leakim971

@mplungjan how could you say that : you said you'Re not super with jquery ;-)) xLOL

Michel Plungjan

If I understand correctly
When the checkall is clicked, each checkboxtobeChecked should have its checked attribute set to whatever the checkall is set to and then execute the onclick event handler attached to the checkbox

OR

When the checkall is clicked, each checkboxtobeChecked should simply be clicked, since they will be in sync with checkall

HOWEVER that will FAIL when you reload the page since the state set by the click will not be correct.

SO I suggest the FIRST example
onclick of the checkall, set each related checkbox to the same state and execute the onclick
That means that onload of the page you can simpyl execute the onclick of the checkall to set the state OR if the user has toggled some checkboxes, you will INSTEAD loop over all checkboxes and execute their onclick to reset the page to what the state changes meant

cofactor

ASKER

No . its not working .Let me explain ...
I have the existing working javascript as below

see video 1
http://www.dailymotion.com/video/xdy5u6_vid1_creation

Now, Instead of clicking one by one as you see in the video1 , I'll click "select ALL" box (olive colored) at the top in the first column.

In order to do this , I put the code below .
When click "select ALL" box at the top in the first column. this is called ..

$('.checkboxtobeChecked').click(); // "checkboxtobeChecked" is the CLASS of all the small checkboxes in the first column.

However, it did not able to check the other boxes like earlier in video1 !! ? why click action did not cascaded as in video1 this time ?

see video 2:
http://www.dailymotion.com/video/xdy78t_vid2_creation

How do I solve this problem now ?

ASKER CERTIFIED SOLUTION

hielo

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

cofactor

ASKER

>>>Did you do: $(this).click();

OK . I tried with that also . Not working.

Here I have changed the code this way ...

$('.checkboxtobeChecked').each(function() {
$(this).click();
});

Its not working as desired .

see the "Select ALL" and "UnSelect ALL" in video 3

video 3:
http://www.youtube.com/watch?v=LM1wdI0sYGU

cofactor

ASKER

points increased to 300

hielo

It's hard to help you if you don't provide the code/link, but from your third link, it looks like it DOES work, except that the checkboxes on the column that is NOT checked seem to be "getting/inheriting" the OPPOSITE of the state of the clicked item.

In other words, when you click on the Olive box:
Argentina gets checked, and the remainder of that row gets "unchecked"
Then when you click on the Olive box again, Argentina gets unchecked, and the remainder of the row gets "checked"

Again, I don't know how you are handling/assigning the checked/unchecked states but it seems that somewhere you are missing a "!"

cofactor

ASKER

Here is the relevant html code attached as you asked.

selectall.html

SOLUTION

leakim971

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

cofactor

ASKER

Ok . Thanks ... I run this code , but it has few problems . Let me explain

Problem 1:

When I'm doing 'Select ALL' in the first Olive box , if any checkbox has already a got checked value , it is unchecking that...... Select ALL is not happening really . So, I want to skip that checkbox if its already checked.

Similar thing is happening during UnSelecting the first Olive Box.

Example :
I have explained this here in this video

http://www.youtube.com/watch?v=8-fWZsIHU_A

Look at Equador row .Suppose Equadator has got checked values on load . Now, I'm doing Select All in the first Olive box. Its Unchecking Equador now ...Select All is not happening .

Opposite thing is happening while doing 'UnSelect All' .

So, the action is , during Select ALL in the first olive box, we need to click the checkboxes if its not checked

and during Unselect ALL in the first olive box we need to unclick the checkboxes if its checked.

Problem 2:

You know , this action will only happen to First and Second Olive box because these are meant for 'Select ALL' stuff which is happening really now except we are facing a little problem as discussed in the above.

But for other Olive boxes , say I did Check/Uncheck in the Olive box 3.... I just want to check / uncheck the the checkboxes below to the Olive box 3 column only....this is same for Olive box 3, Olive box 4...Olive box 16

Now, to answer your queries :

>>The class for even column is not the same for all even columns.
you can add any EXTRA css you like if that solves the above requirement.
I'll try to customize as per my need .

cofactor

ASKER

points inscreased to 500

leakim971

so the final purpose is to check all or uncheck all ?

mean :
- for the two first checkboxes on the first row you want to (un)check all respectively odd and even rows
- for all others checkboxes on the first and second column you want to (un)check all the checkbox on the same row
- for all others checkboxes on the first row (un)check all the checkbox on the same column

Or do you really need to call a specific function doing anything else to (un)check all when you click ? I see you set the onclik attribute with pure javascript, seems you only (un)check checkboxes with it, could you confirm ?

SOLUTION

hielo

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

cofactor

ASKER

Hi,

I have solved it . see the attached file.

I'll award the points soon . I have not yet deployed this in the server . I'll do that shortly and do a testing .

Regards
8th-july-selectall.htm

SOLUTION

leakim971

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

SOLUTION

leakim971

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial