选中时更改复选框图像

Question

I have a basic form with images instead of checkboxes (but act as if). 我有一个带有图像的基本表单，而不是复选框（但是好像在运行）。 In order to be more consistent, I want the image to be changed when a user clicks it. 为了更加一致，我希望在用户单击图像时对其进行更改。

For exemple, when you click on the first icon (Blackjack), it will change from this > 例如，当您单击第一个图标（二十一点）时，它将从此> 在此处输入图片说明 to this > 对此>

I've tried to do so in JQuery but I think I lack some knowledge. 我曾尝试在JQuery中这样做，但我认为我缺乏一些知识。 Can you help me fix my script? 您能帮我解决我的脚本吗？

JSFiddle : http://jsfiddle.net/x0baboc6/ JSFiddle ： http : //jsfiddle.net/x0baboc6/

form.php form.php的

<style>
input[type=checkbox]{
  display: none;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>

<form method="post" action="recap.php">
  <p>
    Cliquez sur les icônes des jeux que vous souhaitez:<br>
    <p>

      <label for="blackjack"><img src="img/blackjack.jpg" alt=""></label></p>
      <INPUT id="blackjack" type="checkbox" value="Blackjack" name="game[]">    

<p>
      <label for="chuckaluck"><img src="img/chuckaluck.jpg" alt=""></label></p>
      <INPUT id="chuckaluck" type="checkbox" value="Chuck a Luck" name="game[]">

<p>
      <label for="roulette"><img src="img/roulette.jpg" alt=""></label></p>
      <INPUT id="roulette" type="checkbox" value="Roulette" name="game[]">

<p>
      <label for="stud"><img src="img/stud.jpg" alt=""></label></p>
      <INPUT id="stud" type="checkbox" value="Stud Poker" name="game[]">

<p>
      <label for="holdem"><img src="img/holdem.jpg" alt=""></label></p>
      <INPUT id="holdem" type="checkbox" value="Holdem Poker" name="game[]">

<p>
      <label for="boule"><img src="img/boule.jpg" alt=""></label></p> 
      <INPUT id="boule" type="checkbox" value="La Boule" name="game[]">

    <input type="button" value="Retour en arrière" onClick="self.history.back();">
    <input type="submit" name="submit" value="Poursuivre">
</p>
</form>

<script>
$("#blackjack").click( function(){
   if( $(this).is(':checked') ) $('#blackjack').attr('src','img/blackjack.gif');
    }
});;
});
</script>

Answer 1

Try this : 尝试这个：

 $("img").click( function(){ if( $(this).attr('data-checked') == "false" ){ $(this) .attr('src','http://i.stack.imgur.com/J6dkP.gif') .attr('data-checked', 'true'); } else { $(this) .attr('src','http://i.imgur.com/kfMWC91.jpg') .attr('data-checked', 'false'); } });

 img{ cursor: pointer; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <img src="http://i.imgur.com/kfMWC91.jpg" data-checked="false" />

The trick is to store the "checked" state in a custom attribute (here 'data-checked') 诀窍是将“已检查”状态存储在自定义属性中（此处为“数据已检查”）

Answer 2

Since you are not directly clicking on the input you can't use click. 由于您没有直接单击输入，因此不能使用click。 What you click on however is the label. 但是，您单击的是标签。 The label then changes the input value. 标签然后更改输入值。 So instead of click change it to .. you guessed it, .change() 因此，不要单击将其更改为..而是将其更改为.change()

The next step is to change the image. 下一步是更改图像。 The problem here is that you changed the src attribute of the input instead of the img element... so first we need to get the img element and change the src. 这里的问题是您更改了输入的src属性而不是img元素...所以首先我们需要获取img元素并更改src。

 $("#blackjack").change(function () { if ($(this).is(':checked')) $(this).prev().find('img').attr('src', 'http://i.stack.imgur.com/J6dkP.gif'); else $(this).prev().find('img').attr('src', 'http://i.imgur.com/kfMWC91.jpg'); });

 input[type=checkbox] { display: none; }

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <form method="post" action="recap.php"> <p>Cliquez sur les icônes des jeux que vous souhaitez: <br> <p> <label for="blackjack"> <img src="http://i.imgur.com/kfMWC91.jpg" alt=""> </label> </p> <INPUT id="blackjack" type="checkbox" value="Blackjack" /> </form>

Alternatively you can use $('[for='+this.id+'] img') for the selector and change the attribute. 另外，您可以将$('[for='+this.id+'] img')用于选择器并更改属性。 I suggest something in the style below. 我建议使用以下样式。 With this you don't have to create a handler for every image you will add. 这样，您不必为要添加的每个图像创建处理程序。

 $("form input[type=checkbox]").change(function(e) { var state = $(this).is(':checked'); $('form [for=' + this.id + '] img').attr('src', function() { return state ? $(this).data('checked') : $(this).data('unchecked'); }); });

 input[type=checkbox] { display: none; }

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <form method="post" action="recap.php"> <p>Cliquez sur les icônes des jeux que vous souhaitez: <br> <p> <label for="blackjack"> <img src="http://i.imgur.com/kfMWC91.jpg" data-checked='http://i.stack.imgur.com/J6dkP.gif' data-unchecked='http://i.imgur.com/kfMWC91.jpg' alt=""> </label> </p> <INPUT id="blackjack" type="checkbox" value="Blackjack" /> </form>

Answer 3

you have to put an id to the picture, like this: 您必须在图片上添加一个ID，如下所示：

 <label for="blackjack"><img  id="test" src="http://i.imgur.com/kfMWC91.jpg" alt=""/></label></p>

in this case "test" 在这种情况下，“测试”

then in the javascript put this: 然后在javascript中输入以下内容：

$("#blackjack").click( function(){
    if( $(this).is(':checked') ){
             $('#test').attr('src','http://i.imgur.com/AvPEx4i.jpg');
        }else{
          $('#test').attr('src','http://i.imgur.com/kfMWC91.jpg');
        }
});

here the example http://jsfiddle.net/x0baboc6/3/ 这是示例http://jsfiddle.net/x0baboc6/3/

edit, to uncheck just put the else in the function. 编辑，要取消选中，只需将else放入函数中即可。

选中时更改复选框图像

问题描述

3 个解决方案

解决方案1
3 2015-02-17 13:04:01

解决方案2
1 已采纳 2015-02-17 13:07:37

解决方案3
0 2015-02-17 13:06:39

选中时更改复选框图像

问题描述

3 个解决方案

解决方案1 3 2015-02-17 13:04:01

解决方案2 1 已采纳 2015-02-17 13:07:37

解决方案3 0 2015-02-17 13:06:39

解决方案1
3 2015-02-17 13:04:01

解决方案2
1 已采纳 2015-02-17 13:07:37

解决方案3
0 2015-02-17 13:06:39