Question

我正致力于Dream-weaver的电话差距应用我有2个div .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

通常最方便的是为您的目的使用其他课程。这是一个简单的例子：

    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 mobie，因此您可能需要尝试vclick或tap个事件而不是常规的click事件。

Answer 3

我跳过Javascript并使用:checked元素和#example { visibility: hidden; width: 0; } label { color: purple; } #example:checked + label { background-color: red; color: white; }选择器。

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

HTML将是这样的：

checked

使用这种方法，您不必担心跟踪{{1}}变量，您可以正常计算出来。

这是一个演示：http://jsbin.com/cirali/1/edit?html,css,output

Answer 4

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

如何使图像作为复选框工作？

4 个答案: