Question

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

例如，当您点击第一个图标（Blackjack）时，它将从此更改＆gt; enter image description here 到此＆gt;

我试过在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" />

诀窍是将“已检查”状态存储在自定义属性中（此处为“数据已检查”）

Answer 2

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

下一步是更改图像。这里的问题是您更改了输入的src属性而不是img元素...所以首先我们需要获取img元素并更改src。

＆＃13;

$("#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');
});

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

$("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');
  });
});

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

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

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

在这种情况下＆＃34;测试＆＃34;

然后在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放入函数中。

选中后更改复选框图像

3 个答案: