选中时更改复选框图像

Question

我有一个带有图像而不是复选框的基本表单（但表现得好像）。为了更加一致，我希望在用户单击时更改图像。

例如，当您点击第一个图标 (Blackjack) 时，它会从这个 > 变为 >

我在 JQuery 中尝试这样做，但我认为我缺乏一些知识。你能帮我修复我的脚本吗？

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

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

试试这个：

$("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" />

诀窍是将 "checked" 状态存储在自定义属性中（此处 'data-checked'）

Answer 2

你必须给图片加上一个id，像这样：

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

在这种情况下 "test"

然后在 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');
        }
});

这里是例子http://jsfiddle.net/x0baboc6/3/

编辑，取消选中只需将 else 放入函数中。

Answer 3

由于您不是直接点击输入，因此无法使用点击。但是，您单击的是标签。然后标签更改输入值。因此，不要单击将其更改为 .. 你猜对了，.change()

下一步是更改图像。这里的问题是你更改了 input 的 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>

或者您可以使用 $('[for='+this.id+'] img') 作为选择器并更改属性。我建议采用以下样式。有了这个，您不必为要添加的每个图像创建一个处理程序。

$("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>

选中时更改复选框图像

Change checkbox image when checked

javascript

checkbox

jquery

input