使用 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

之所以在点击时选中复选框，是因为图像位于标签内。第二次单击时未取消选中它的原因是因为当时它不在标签标签中。有几种方法可以解决这个问题，例如，您可以移动 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/

Answer 2

当您移动到 selected 容器时，label 不会移动，它具有决定要检查哪个 checkbox 的 for 属性

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

演示：Fiddle

使用 Jquery 在单击时取消选择复选框

Unselect checkbox at click using Jquery

checkbox

jquery

unselect