Снимите флажок с помощью JQuery

Question

Я установил базовую корзину покупок, где вы должны положить товар в зеленую коробку, чтобы заказать их. Когда вы нажимаете на значок элемента, он корректно проверяет соответствующий флажок. К сожалению, когда вы нажимаете на нее снова, она не снимается.

Я пробовал `$ (elem) .prop ('checked', false); но не работает. Есть ли у вас какая-нибудь другая идея?

JSFiddle: http://jsfiddle.net/xbsoLp0u/8/ (Я включил флажок, чтобы вы могли увидеть ошибку).

Код:

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

Answer 1

При перемещении в selected контейнера, то label не является который двигался, имеющий атрибут for, который решает, какой checkbox проверить так

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

Демо: Fiddle

Answer 2

Причина, по которой флажок установлен на клике, заключается в том, что изображение находится внутри метки метки. Причина, по которой он не проверяется при втором нажатии, заключается в том, что в то время это не в теге метки. Есть несколько способов решить эту проблему, например, вместо перемещения изображения, вы можете переместить метку внутри йот:

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/