[jQuery] Re: Toggling a check box on or off

[Karl Swedberg]

Hi dacoder,
This should do it:

$('a.giftwrap-check-img').click(function() {
  var $this = $(this);
  var imgSrc = $('img', this).attr('src');
  var checkedStatus = $this.next().is('input:checked');
  $this.find('img').attr({src: imgSrc == '/assets/images/ 
icon_add.gif' ? '/assets/images/icon_x_remove.gif' : '/assets/images/ 
icon_add.gif'});
  $this.next().attr({checked: checkedStatus == true ? '' : 'checked'});
  return false;
});

Toggles the child image's src and the next input's checked value.

--Karl
_________________
Karl Swedberg
www.englishrules.com
www.learningjquery.com



On Jan 23, 2008, at 7:52 AM, dacoder wrote:


What I am trying to do is make it so a checkbox is checked if the user
clicks a link with an add image inside of it. If the user has clicked
the add button the check box gets checked and the image switches to a
remove image. If the user then clicks the remove image the check box
is unchecked. they are set up like the following.

  <a href="#" class="giftwrap-check-img"><img src="/assets/images/
icon_add.gif" alt="" /></a>
    <input type="checkbox" name="" class="giftwrap-check" value="">

these are in a table row and cell and depending on how many items are
in the table there could be multiple rows that have a link and check
box.

I have tried a lot of different ways but this was my first initial
attempt at it. I was able to get one working but not the other when
clicking the image again


$(".giftwrap-check").each(function(){
                   if ($(this).attr("checked")){
                               $(this).siblings(".giftwrap-check-
img").click(function(){
                                    $(this).html("<img src=\"/assets/
images/icon_add.gif\" alt=\"\" />")
                                    $(this).siblings(".giftwrap-
check").removeAttr("checked");
                                    return false;
                               });
                           }else{
                              $(this).siblings(".giftwrap-check-
img").click(function(){
                                    $(this).html("<img src=\"/assets/
images/icon_x_remove.gif\" alt=\"\" />")
                                    $(this).siblings(".giftwrap-
check").attr("checked","checked");
                                    return false;
                               });
                          }
               });


here is another attempt at it


$(".giftwrap-check-img").click(function(){
    var o = this;
       $(".giftwrap-check-img").each(function(i){
              if (this == o){
                 if ($(".giftwrap-check:eq(" + i +
")").attr("checked") ){
                   $(".giftwrap-check:eq(" + i +
")").removeAttr("checked");;
                 }else{
                  $(".giftwrap-check:eq(" + i +
")").attr("checked","checked");
                }
            }
        });
       return false;
});


There might be some missing parts because I was just ripping these
things apart trying to get it to work.