Измените флажок, если отмечен

У меня есть базовая форма с изображениями вместо флажков (но действуйте так, как будто). Чтобы быть более последовательным, я хочу, чтобы изображение менялось, когда пользователь нажимает на него.Измените флажок, если отмечен

Для Exemple, при нажатии на первую иконку (Blackjack), она будет меняться от этого> enter image description here в этом>

Я попытался сделать это в 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>

источник

2015-02-17 cheezburger

'$ ("# блэкджек")' есть флажок. Ваши CSS-состояния: 'input [type = checkbox] {display: none}', поэтому флажки скрыты. Ваш javascript никогда не может быть запущен. –

@JeremyThille метод взлома будет состоять в том, чтобы вызвать элемент img вместо флажка. Я думаю, это возможно. – cheezburger

@JeremyThille это неправильно, атрибут «для» работает и заменяет кнопку на флажке [JSfiddle] (http://jsfiddle.net/84cggj5q/1/) – R3tep

Поскольку вы не нажимаете на вход, вы не можете использовать клик. Однако вы нажимаете на ярлык. Затем метка изменяет входное значение. Поэтому вместо того, чтобы щелкнуть, измените это на .. вы уже догадались, .change()

Следующий шаг - изменить изображение. Проблема здесь в том, что вы изменили атрибут 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>

источник

2015-02-17 13:07:37 Spokey

Попробуйте это:

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

Хитрость заключается в том, чтобы хранить «проверил» состояние в пользовательский атрибут (здесь «данных проверено»)

источник

2015-02-17 13:04:01

Вы должны поместить идентификатор в картину, как это:

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

в этом случай "тест"

затем в 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 в функцию.

источник

2015-02-17 13:06:39 TiGreX

И как вы снимете? –

с другом, я отредактировал – TiGreX

Измените флажок, если отмечен

ответ

Смежные вопросы