用链接实现Jquery复选框的选中和取消选中

Question

用链接实现Jquery复选框的选中和取消选中

4

我正在尝试使用jquery动态地勾选和取消勾选一个框。

理想情况下，如果点击“编辑项目文件”，这将显示上传新图像字段(edit_project_image)是活动状态，即未通过再次单击(edit_project_image)或单击(remove_edit_image)而被移除。此外，如果有删除线，则意味着添加了类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>

我认为最好的情况是设置一个变量，如果为真，则将复选框的值设置为真。
我尝试过的方法包括：

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

这个功能的作用是检查所有具有类名.edit_image_checkbox的复选框（上述内容在php循环内），而不仅仅是与被点击的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;，这将选中所有复选框，但另一个问题是没有办法取消选择。

我仍在学习和头脑风暴这个项目的这部分，如果您有任何想法，那就太好了。

- Brooke.

“我想我得做类似这样的事情” - 你实际上试过了吗？你遇到了什么问题吗？ - meder omuraliev

是的，我尝试过了，并且对代码进行了一些处理。我遇到的问题是：1）它会检查所有具有类 .edit_image_checkbox 的框；2）我可以使用 $('.edit_image_checkbox').attr('checked',true); 切换复选框，但不知道如何取消切换。我知道当人们来到表格和小组并希望得到答案时会有多么烦人。相信我，我在这里学习，但是这个问题困扰了我已经6个小时了！ - Brooke.

通常情况下，当您发布HTML输出而不是PHP循环时，您会获得更多的响应。 - Ryan Florence

除非我读错了，你的原始帖子并没有提供任何关于你实际尝试过什么的信息，因此任何试图回答的人都会对实际情况感到困惑。 - meder omuraliev

尝试重新用你迄今为止在尝试中遇到的问题来重新表达整个问题，除非你遇到了服务器端的问题，否则可能不需要PHP代码片段。 - meder omuraliev

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- TheVillageIdiot · Accepted Answer

我理解你的要求是，当用户点击编辑或删除图像时，您会向包含编辑/删除链接的

添加或删除remove_project_image类。现在，如果remove_project_image类被添加到

中，您希望检查复选框，否则清除它。以下代码片段可以实现此功能。

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