Question

我正在尝试使用jquery动态检查和取消选中一个框。

理想的情况是，如果单击编辑项目文件，则会显示上传新图像的字段(edit_project_image)处于活动状态，即不会通过再次点击(edit_project_image)或点击(remove_edit_image)。此外，如果有一个strikethough，我将添加类remove_project_image，那么也将检查复选框。

这个想法是，如果上述任何一个都是真的，则需要删除当前的活动图像。

现在是我的jquery：

//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;
});

这是Html标记：

<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>

我认为最佳情况会设置一个var，如果为true，则会将复选框的值设置为true 我尝试过的事情包括：

    $('.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;
});

这是因为它检查所有（上面是在php循环中）复选框的.edit_image_checkbox类，而不仅仅是remove_project_file类旁边的复选框被点击了。此外，当再次检查链接时，没有取消选中我尝试else {$('.edit_image_checkbox').attr('checked',true);}这只是混淆了它，如果没有检查它然后检查它，但是如果检查它取消选中它。

我的另一个想法是使用变量并将其设置为true或false，如果为true，则选中该框。我试过这个：

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

然后将file_checkbox_checked = true;添加到应检查复选框的每个函数中。这似乎什么都不做。我可以设置var file_checkbox_checked = true;，这将检查所有复选框，这是另一个问题是没有办法取消选中它。

我仍然在学习，集思广益这个项目的一部分，所以如果你有任何想法他们会很棒。

Answer 1

我理解你的要求[程序员何时没有:)]，当用户点击编辑或删除你添加或删除remove_project_image类的图像时，包含编辑/删除链接的li。现在，如果将remove_project_image类添加到li，您需要选中该复选框，否则请将其清除。以下代码片段可以做到这一点。

$('.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;
});

Jquery选中并取消选中带有链接的复选框

1 个答案: