admin管理员组

文章数量:1390192

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. Can you help me fix my script?

JSFiddle: /

form.php

<style>
input[type=checkbox]{
  display: none;
}
</style>
<script src=".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>

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. Can you help me fix my script?

JSFiddle: http://jsfiddle/x0baboc6/

form.php

<style>
input[type=checkbox]{
  display: none;
}
</style>
<script src="https://ajax.googleapis./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>
  • javascript
  • jquery
  • checkbox
  • input
Share Improve this question asked Feb 17, 2015 at 12:55 cheezburgercheezburger 772 silver badges9 bronze badges 4
  • 1 $("#blackjack") is a checkbox. Your CSS states : input[type=checkbox]{ display: none}, so checkboxes are hidden. Your javascript can never be triggered. – Jeremy Thille Commented Feb 17, 2015 at 12:58
  • @JeremyThille a hack method would be to trigger the img element instead of checkbox. I think it's possible. – cheezburger Commented Feb 17, 2015 at 13:01
  • @JeremyThille it is wrong, the "for" attribute works and replace the click on the checkbox JSfiddle – R3tep Commented Feb 17, 2015 at 13:03
  • Really? Wow, I didn't know this one – Jeremy Thille Commented Feb 17, 2015 at 13:04
Add a ment  | 

3 Answers 3

Reset to default 3

Try this :

$("img").click( function(){
    if( $(this).attr('data-checked') == "false" ){
       $(this)
           .attr('src','https://i.sstatic/J6dkP.gif')
           .attr('data-checked', 'true');
    } else {
        $(this)
           .attr('src','http://i.imgur./kfMWC91.jpg')
           .attr('data-checked', 'false');
    }
        
});
img{
  cursor: pointer;
  }
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="http://i.imgur./kfMWC91.jpg" data-checked="false" />

The trick is to store the "checked" state in a custom attribute (here 'data-checked')

Since you are not directly clicking on the input you can't use 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()

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.

$("#blackjack").change(function () {
    if ($(this).is(':checked')) 
        $(this).prev().find('img').attr('src', 'https://i.sstatic/J6dkP.gif');
    else
       $(this).prev().find('img').attr('src', 'http://i.imgur./kfMWC91.jpg');
});
input[type=checkbox] {
    display: none;
}
<script src="//ajax.googleapis./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./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. 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./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./kfMWC91.jpg" data-checked='https://i.sstatic/J6dkP.gif' data-unchecked='http://i.imgur./kfMWC91.jpg' alt="">
      </label>
    </p>
    <INPUT id="blackjack" type="checkbox" value="Blackjack" />
</form>

you have to put an id to the picture, like this:

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

in this case "test"

then in the javascript put this:

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

here the example http://jsfiddle/x0baboc6/3/

edit, to uncheck just put the else in the function.

本文标签： javascriptChange checkbox image when checkedStack Overflow

版权声明：本文标题：javascript - Change checkbox image when checked - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744689851a2619926.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。