[英]Jquery check and uncheck checkbox with a link
I am trying to dynamically check and uncheck a box with jquery . 我试图用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)
. 理想的情况是,如果单击编辑项目文件,则会显示上载新图像的字段
(edit_project_image)
处于活动状态,即不会通过再次单击(edit_project_image)
或单击(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. 此外,如果有一个strikethough,我将添加类
remove_project_image
,然后复选框也将被检查。
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: 这是我现在的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;
});
Here is the Html Markup: 这是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>
I believe the best situation would set a var that if true will set the value of the checkbox to true. 我相信最好的情况会设置一个var,如果为true,则将复选框的值设置为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. 这是因为它检查了所有(上面是在php循环中)带有
.edit_image_checkbox
类的复选框,而不仅仅是被单击的remove_project_file
类旁边的remove_project_file
。 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. 另外,当再次检查链接时,没有取消选中我尝试了
else {$('.edit_image_checkbox').attr('checked',true);}
这只是混淆了它,如果它没有被检查然后检查但是然后,如果检查它取消选中它。
Another idea i had was to use a variable and set it to true or false and if true the box is checked. 我的另一个想法是使用变量并将其设置为true或false,如果为true,则选中该框。 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;
然后添加了
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;
我可以设置
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. 我仍然在学习,集思广益这个项目的一部分,所以如果你有任何想法他们会很棒。
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. 我理解你的要求[程序员什么时候没有:)],当用户点击编辑或删除你添加的图像或删除
remove_project_image
类到包含编辑/删除链接的li
。 Now if the class remove_project_image
is added to the li
you want to check the checkbox otherwise clear it. 现在,如果将类
remove_project_image
添加到li
remove_project_image
检查复选框,否则清除它。 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;
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.