Как сделать изображение работать как флажок?

Question

Я работаю над приложением телефона зазора в дрим-ткача У меня есть 2 дивы .pics и .cover

<div class="pics"> 
    <div class="cover"></div> 
</div> 

основная идея, чтобы изменить цвет обложки DIV и переключить переменную JS между истинным и ложным

 var checked=false; 
$('.pics').click(function(){ 
    CheckToggle(); 
}); 
function CheckToggle(){ 
    if(checked==false){ 
     checked=true; 
     $('.cover').css({"background":"rgba(255,255,255,.5)"}); 
    } 
    else 
     checked=false; 
} 

я нажимаю на .pics и ничего не происходит я думаю, что есть ошибка в коде Jquery

Это то, что я все-таки

$(function(){ 
    $("#item1").bind("tap", PicCheck); 
     var checked; 
     var choosen="#item1"; 
     checked=$(choosen).attr('pcheck'); 

function PicCheck(event){ 
    if(checked=="false"){ 
     $(choosen).toggleClass("selected"); 
     checked="true"; 
     } 
     else if(checked=="true"){ 
     $(choosen).toggleClass("selected"); 
     checked="false"; 
     } 
    $(choosen).attr('pcheck',checked);     
} 

});

Answer 1

С некоторыми CSS вы можете реализовать флажок и радио кнопки с картинками. Попробуйте это:

<div> 
<input id="input-1" class="img-checkbox" type="radio" name="selectTipo"> 
<label for="input-1" class=""> 
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/128px-HTML5_logo_and_wordmark.svg.png"> 
</label> 

<input class="img-checkbox" type="radio" id="input-2" name="selectTipo"> 
<label for="input-2"> 
    <img src="http://www.javatpoint.com/images/javascript/javascript_logo.png"> 
</label> 

И в вашем CSS:

input.img-checkbox[type=radio], input.img-checkbox[type=checkbox] { 
    display: none; 
} 
img{ 
    height:100px; 
} 
input.img-checkbox[type=radio]+label, input.img-checkbox[type=checkbox]+label { 
    border: 10px solid transparent; 
    display: inline-block; 
    border-radius: 10px; 
} 

input.img-checkbox[type=radio]:checked+label, input.img-checkbox[type=checkbox]:checked+label { 
    border: 10px solid #C6ECED; 
    display: inline-block; 
} 

Смотрите результат в последующей jsfiddle

Answer 2

В зависимости от того, как у вас есть элементы в стиле, было бы лучше, чтобы поместить действие на .cover элемента ... Если дочерний элемент .cover точно такой же высоты и ширины родительского элемента .pics вы не сможете нажмите на .pics

Answer 3

Обычно для удобства вы можете использовать дополнительный класс. Вот простой пример:

var checked = false; 
 
    $('.pics').click(function() { 
 
     CheckToggle(); 
 
    }); 
 

 
    function CheckToggle() { 
 
     $('.cover').toggleClass('selected'); 
 
     checked = $('.cover').hasClass('selected'); 
 
    }

.cover { 
 
     background: red; 
 
    } 
 
    .cover.selected { 
 
     background: green; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="pics"> 
 
    <div class="cover">test</div> 
 
</div>

Edit: Поскольку вы используете JQuery mobie, вы можете попробовать vclick или tap события вместо регулярного click события.

Answer 4

Я пропустил Javascript и воспользуюсь элементом label и селектором :checked.

#example { 
    visibility: hidden; 
    width: 0; 
} 

label { 
    color: purple; 
} 

#example:checked + label { 
    background-color: red; 
    color: white; 
} 

HTML, будет выглядеть так:

<input id="example" type="checkbox" name="example" value="true"> 
<label for="example">Example</label> 

При таком подходе вам не нужно будет беспокоиться об отслеживании переменной checked, и вы можете просто понять это нормально.

Вот демо: http://jsbin.com/cirali/1/edit?html,css,output