javascript - 如何使图像用作复选框？

Question

我正在 Dream-weaver 中开发 phone-gap 应用程序 我有 2 个 div .pics 和 .cover

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

主要思想是改变封面div的颜色并在true和false之间切换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