如何使图像用作复选框？

Question

我正在 Dream-weaver 中开发 phone-gap 应用程序我有 2 divs .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

根据元素的样式设置，最好将操作放在 .cover 元素上...如果子元素 .cover 的高度和宽度与父元素 .pics 您将无法点击 .pics

Answer 2

为您的目的使用额外的 class 通常是最方便的。这是一个简单的例子：

    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>

编辑： 由于您使用的是 jQuery 手机，您可能想尝试 vclick or tap 事件而不是常规的 click 事件。

Answer 3

我会跳过 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

Answer 4

通过某些 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

如何使图像用作复选框？

how to make an image work as a check box?

html

javascript

css

dreamweaver

jquery-mobile