Checking and unchecking jQuery with a link

Question

I am trying to dynamically check and uncheck a box with jquery.

The ideal situation would be that if you clicked on the editing project file, it would indicate that the field for loading a new image (edit_project_image) was active, that is, it would not be deleted by a single click on (edit_project_image) , or by clicking on (remove_edit_image) . In addition, if there is strikethough, so that I add that the remove_project_image class will be added, the checkbox will also be checked.

The idea is that any of the above is true, the current active image needs to be deleted.

Here is my jquery right now:

 //show hide the file box to edit images $('.edit_project_file').live('click',function() { $(this).parent().next().toggle(); $(this).parent().removeClass("remove_project_image"); return false; }); //allow the user to remove the file box if they don't wish to edit an image $('.remove_edit_image').live('click',function() { $(this).parent().hide(); $(this).parent().removeClass("remove_project_image"); return false; }); //add strikethough when the user decides to delete an image $('.remove_project_file').live('click',function() { $(this).parent().toggleClass("remove_project_image"); $(this).parent().next().hide(); return false; }); 

Here is the HTML markup:

 <ul class="imgPreview"> <li> <a href="#" rel="../images/portfolio/project_images/manager_pimg3_7_1281126121.jpg">manager_pimg3_7_1281126121.jpg </a> <a href="#" class="edit_project_file"> <img src="images/edit.gif"/></a> <a href="#" class="remove_project_file"> <img src="images/delete.gif"/></a> </li> <li class="edit_project_image"> <input name="upload_project_images[]" type="file" /> <a href="#" class="remove_edit_image" border="0"> <img src="images/delete.gif" /></a> </li> <li> <input name="edit_image[]" type="checkbox" value="manager_pimg3_7_1281126121.jpg" class="edit_image_checkbox"/> </li> </ul> 

I believe a better situation would set var if true set the checkbox value to true. Things I've tried include:

  $('.remove_project_file').live('click',function() { $(this).parent().toggleClass("remove_project_image"); $(this).parent().next().hide(); if ($(this).parent().next(".edit_image_checkbox").is(":not(:checked)")){ $('.edit_image_checkbox').attr('checked',true); } return false; }); 

This works in the sense that it checks all (above in the php loop) flags with the .edit_image_checkbox class, and not just the one next to the remove_project_file class that was clicked. Also do not uncheck the link when the link is checked again for this, I tried else {$('.edit_image_checkbox').attr('checked',true);} , it just confuses him, because he says that if it is not installed, check it, and then if it is installed, clear the check box.

Another idea I used was to use a variable and set it to true or false, and if true, then the checkbox is checked. I tried this as:

  var file_checkbox_checked = false; if(file_checkbox_checked == true){ $('.edit_image_checkbox').attr('checked',true); } else{ $('.edit_image_checkbox').attr('checked',false); } 

Then added file_checkbox_checked = true; to each of the functions that should check the box. It seemed to do nothing. I could set var file_checkbox_checked = true; , and this will check all the checkboxes with another problem, since there is no way to uncheck the box.

I am still involved in the training, thinking over part of this part of the project, so if you have any ideas, they will be great.

Answer 1

I correctly understand your requirement [when non-programmers do not :)] when the user clicks on to edit or delete the image that you add or remove the remove_project_image class to the li link containing the edit / delete link. Now, if the remove_project_image class remove_project_image added to li , you want to check the box, otherwise clear it. The following snippet does this.

 $('.remove_project_file').live('click',function() { $(this).parent().toggleClass("remove_project_image"); //TO KNOW IF STRIKE-THROUGH IS APPLIED TO IT OR NOT var r = $(this).parent().hasClass("remove_project_image"); $(this).parent().next().hide(); //WE NEED TO GET THE LI CONTAINING CHECK BOX, ONE NEXT TO HIDDEN ONE var t = $(this).parent().next().next(); //GET CHECKBOX var c=$(".edit_image_checkbox", t); $(c).attr('checked',r); return false; });