CODEWITHSUNDEEP
javascripthtmlcssjquery-mobiledreamweaver
Zahema
Zahema

Reputation: 1415

how to make an image work as a check box?

I am working on phone-gap application in dream-weaver I have 2 divs .pics and .cover

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

the main idea is to change the colour of the cover div and toggle a JS variable between true and false

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

I click on .pics and nothing happens I think there is an error in the jquery code

This is what I used after all

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

});

Upvotes: 0

Views: 392

Answers (4)

Chavdar Slavov
Chavdar Slavov

Reputation: 875

It is usually most convenient to use additional class for your purpose. Here is a simple example:

    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: Since you are using jQuery mobie, you might want to try the vclick or tap events instead of the regular click event.

Upvotes: 1

Maxi Baez
Maxi Baez

Reputation: 578

With some css you can implement a checkbox and radio buttons with pictures. Try this :

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

And in your 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;
}

See the result in the follow jsfiddle

Upvotes: 2

Bill Criswell
Bill Criswell

Reputation: 32921

I'd skip the Javascript and use a label element and the :checked selector.

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

label {
  color: purple;
}

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

The HTML would be like this:

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

With this approach you wouldn't need to worry about tracking the checked variable and you can just figure it out normally.

Here's a demo: http://jsbin.com/cirali/1/edit?html,css,output

Upvotes: 1

80PoundsOfFury
80PoundsOfFury

Reputation: 264

Depending on how you have the elements styled, it might be better to put the action on the .cover element... If the child element .cover is the exact same height and width of the parent element .pics you wont be able to click on .pics

Upvotes: -1

Related Questions