Question

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

The ideal situation would be that if edit project file was clicked this would show the field to upload a new image (edit_project_image) was active ie not removed via either a click again on (edit_project_image) or a click on (remove_edit_image). Also if there is a strikethough, which would me that the class remove_project_image would be added then the checkbox would also be checked.

The idea is if any of the above is true the the current active image needs to be removed.

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 the best situation would set a var that if true will set the value of the checkbox 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;
});

The this works in the sense that it checks all (the above is in a php loop) the checkboxes with the class of .edit_image_checkbox instead of just the one next to the class of the remove_project_file that was clicked. Also there is no uncheck when the link is checked again for this i tried else {$('.edit_image_checkbox').attr('checked',true);} this just confuses it as it says if it’s not checked then check it but then if it’s checked uncheck it.

Another idea i had was to use a variable and set it to true or false and if true the box is checked. I tried this like:

    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 checkbox. This seemed to do nothing. I could set var file_checkbox_checked = true; and that would check all the checkboxes another problem with this is there is no way to uncheck it.

I am still in the learning, brainstorming part of this part of the project so if you have any ideas they would be great.

Answer 1

I understand your requirement correctly [when does programmers not 🙂 ], when user clicks edit or remove image you add or remove remove_project_image class to the li containing edit/remove link. Now if the class remove_project_image is added to the li you want to check the checkbox 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;
});