2

ユーザーが複数の画像を選択してコマンドを実行できるようにする必要がある Jquery Mobile 1.2、Jquery 1.8.2、css、および HTML 5 ベースのアプリをコーディングしています。

jquery.mobile-1.2.0.min.js ライブラリを使用しない場合、次のように動作します。

CSS コード:

.image-checkbox-container input[type="checkbox"]{
    display: none;
}

.image-checkbox-container img{
    border: 0;
    margin: 4px;
 }

HTML:

<span class="image-checkbox-container">
    <input type="checkbox" name="black-box" value="1" />
<img src="dummyimage1.jpg" />
</span>
<span class="image-checkbox-container">
    <input type="checkbox" name="red-box" value="1" />
    <img src="dummyimage2.jpg" />
</span>
<span class="image-checkbox-container">
    <input type="checkbox" name="green-box" value="1" />
    <img src="dummyimage3.jpg" />
</span>

JQuery:

$('.image-checkbox-container img').live('click', function(){
    if(!$(this).prev('input[type="checkbox"]').prop("checked")){
    $(this).prev('input[type="checkbox"]').prop("checked", true);
     this.style.border = '4px solid #38A';
     this.style.margin = '0px';
}else{
        $(this).prev('input[type="checkbox"]').prop("checked", false);
    this.style.border = '0';
    this.style.margin = '4px';
}
});

jquery.mobile-1.2.0.min.js ライブラリをコードに追加するとすぐに、正しく機能しなくなります。チェックボックスのチェック/選択解除は機能しません。

チェックボックスradio("refresh") を使用しようとしましたが、運がありませんでした。

どんな提案でも大歓迎です。

ありがとう

4

1 に答える 1

0

CSS ソリューションの使用についてはどうでしょうか。

このカスタム CSS を追加します。

 .checked {
    border : 4px solid #38A!important;
    margin : 0px!important;
 }

次のスクリプトを使用します。

 <script>
  $('.image-checkbox-container img').live('click', function(){
    $this=$(this);
    if($this.hasClass('checked')===true){
      $this.removeClass('checked');
    }else{
      $this.addClass('checked');
    }
  });
  </script>
于 2012-11-13T16:09:28.200 に答える