Fatal编程技术网
  • javascript/
  • Javascript 选中时更改复选框图像

Javascript 选中时更改复选框图像

javascript jquery checkbox input

Javascript 选中时更改复选框图像,javascript,jquery,checkbox,input,Javascript,Jquery,Checkbox,Input,我有一个带有图像的基本表单，而不是复选框（但要像这样操作）。 为了更加一致，我希望在用户单击图像时更改图像 例如，当您单击第一个图标（21点）时，它将从this>变为this> 我曾尝试在JQuery中这样做，但我认为我缺乏一些知识。你能帮我修改脚本吗 JSFiddle： form.php <style> input[type=checkbox]{ display: none; } </style> <script src="https://ajax.googl

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

例如，当您单击第一个图标（21点）时，它将从this>变为this>

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

JSFiddle：

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>


输入[类型=复选框]{
显示：无；
}

你在苏哈伊特斯的社区：





















$（“#21点”）。单击（函数（）{
if（$（this）.is（':checked'））$（'#blackjack'）.attr（'src'，'img/blackjack.gif'）；
}
});;
});
试试这个：

$（“img”）。单击（函数（）{
if（$（this.attr（'data-checked'）==“false”）{
$（本）
.attr（'src'，'http://i.stack.imgur.com/J6dkP.gif')
.attr（'data-checked'，'true'）；
}否则{
$（本）
.attr（'src'，'http://i.imgur.com/kfMWC91.jpg')
.attr（'data-checked'，'false'）；
}
});

img{
光标：指针；
}


您必须为图片添加一个id，如下所示：


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


这里是一个例子


编辑，若要取消选中，只需将else放入函数。
因为您没有直接单击输入，所以无法使用单击。但是，您单击的是标签。然后，标签会更改输入值。因此，与其单击，不如将其更改为。。你猜对了，
.change（）

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



$（“#21点”）.更改（函数（）{
如果（$（this）.is（':checked'））
$（this.prev（）.find（'img'）.attr（'src'，'http://i.stack.imgur.com/J6dkP.gif');
其他的
$（this.prev（）.find（'img'）.attr（'src'，'http://i.imgur.com/kfMWC91.jpg');
});

输入[类型=复选框]{
显示：无；
}



你在苏哈伊特斯的社区：






$（“#21点”）
是一个复选框。您的CSS状态为：
input[type=checkbox]{display:none}
，因此复选框是隐藏的。您的javascript永远不会被触发。@JeremyThille一种黑客方法是触发img元素而不是复选框。我认为这是可能的。@JeremyThille这是错误的，“for”属性起作用，并替换单击复选框真的吗？哇，我不知道这个，你怎么取消选中？

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