Unselect checkbox at click using Jquery

Question

I set up a basic shopping cart where you have to put goods into a green box to order them. When you click on the item icon, it correctly checks the associated checkbox. Unfortunately, when you click again on it, it doesn't uncheck.

I've tried `$(elem).prop('checked', false); but it doesn't work. Do you have any other idea please?

JSFiddle: http://jsfiddle.net/xbsoLp0u/8/ (I've let the checkbox displayed on to let you see the bug).

Code:

html

<div id="selected"></div>

    <div id="nonSelected">

      <label for="blackjack"><img onclick="moveButton(this)" src="http://i.imgur.com/kfMWC91.jpg" alt="" data-checked='img/blackjack.gif' data-unchecked='img/blackjack.jpg'></label>
      <INPUT id="blackjack" type="checkbox" value="Blackjack" name="game[]">    

      <label for="chuckaluck"><img onclick="moveButton(this)" src="http://i.imgur.com/AvPEx4i.jpg" alt="" data-checked='img/chuckaluck.gif' data-unchecked='img/chuckaluck.jpg'></label>
      <INPUT id="chuckaluck" type="checkbox" value="Chuck a Luck" name="game[]">

      <label for="roulette"><img onclick="moveButton(this)" src="http://i.imgur.com/tBEisp3.jpg" alt="" data-checked='img/roulette.gif' data-unchecked='img/roulette.jpg'></label>
      <INPUT id="roulette" type="checkbox" value="Roulette" name="game[]">

      <label for="stud"><img onclick="moveButton(this)" src="http://i.imgur.com/Oigq8QI.jpg" alt="" data-checked='img/stud.gif' data-unchecked='img/stud.jpg'></label>
      <INPUT id="stud" type="checkbox" value="Stud Poker" name="game[]">

      <label for="holdem"><img onclick="moveButton(this)" src="http://i.imgur.com/Oc52z68.jpg" alt="" data-checked='img/holdem.gif' data-unchecked='img/holdem.jpg'></label>
      <INPUT id="holdem" type="checkbox" value="Holdem Poker" name="game[]">

      <label for="boule"><img onclick="moveButton(this)" src="http://i.imgur.com/XFsfu7S.jpg" alt="" data-checked='img/boule.gif' data-unchecked='img/boule.jpg'></label>
      <INPUT id="boule" type="checkbox" value="La Boule" name="game[]">

  </div>

js

function moveButton(elem){
    if( $(elem).closest("div").attr("id") == "nonSelected" ){
        $(elem).prependTo('#selected');
    }
    else{
        $(elem).prependTo('#nonSelected');
    }
}

css

#selected{
    width: 400px;
    height: 200px;
    background-color: #339933;
    border-width: 1px;
    border-style: dotted;
    border-color: black;
    padding: 10px;
    margin: 10px;
}

img{
    cursor: pointer;
}

Arun P Johny · Accepted Answer · 2015-02-25 10:00:18Z

2

When you are moving to the selected container, the label is not moved which is having the for attribute which decides which checkbox to check so

function moveButton(elem){
    var $elem = $(elem).parent();
    if( $elem.closest("div").attr("id") == "nonSelected" ){
        $elem.prependTo('#selected');
    }
    else{
        $elem.insertBefore('#'+$elem.attr('for'));
    }
}

Demo: Fiddle

answered Feb 25, 2015 at 10:00

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mario A · Accepted Answer · 2015-02-25 09:59:09Z

1

The reason why the checkbox is checked on click, is because the image is inside the label-tag. The reason why it is not unchecked on second click, is because at that time it is not in the label tag. There are several ways to solve this, for example instead of moving the image, you could move the label inside the dom:

function moveButton(elem){
    if( $(elem).closest("div").attr("id") == "nonSelected" ){
        $(elem).parent('label').prependTo('#selected');
    }
    else{
        $(elem).parent('label').prependTo('#nonSelected');
    }
}

http://jsfiddle.net/xbsoLp0u/10/

answered Feb 25, 2015 at 9:59

Mario A

3,3711 gold badge20 silver badges25 bronze badges

Collectives™ on Stack Overflow

Unselect checkbox at click using Jquery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related