ですべての画像に追加されますあなたが探しているものを理解されている$(this).before...を使用しています。基本的には、チェックマークの正方形をクリックすると、チェックマーク画像をチェックマークの正方形の画像に「切り替える」ことができます。この問題は、トグルがもう機能しない四角の上にチェックマークを付けることです。私はもう少しうまくいくはずの解決策を考え出しました。
は、基本的に我々はlabelが選択されているときには、チェックボックスのcheckedプロパティをtoggleます<input type="checkbox" />これにバインドされているルールを利用する場合。
jQueryでこのイベントにバインドし、チェックマークを表示しないようにすることができます。この例では、クリックイベントはイメージにバインドしませんが、チェックボックスのイベントはchangeです。以下の例のようなもの。
は今の質問は次のとおりです。
は、なぜ私たちは私たちのフォームのポストで結果をキャプチャすることができ、チェックボックスを使って、まあ、チェックボックス
を使用しました。また、checkedプロパティを持つすべてのチェックボックスを列挙することで、チェックされる内容を簡単に識別できます。
これをサーバーに送信するには、nameプロパティを各チェックボックスに追加し、valueプロパティも設定する必要があります。
$('.calendar-check').on('change', function() {
if ($(this).prop('checked'))
$(this).parents('.calendar-wrap:first').find('.checkmark-img').show();
else
$(this).parents('.calendar-wrap:first').find('.checkmark-img').hide();
});
.package-img {
width: 60%;
height: auto;
opacity: 1;
margin-left: 20%;
cursor: pointer;
transition: 1s;
-webkit-transition: 1s;
position: relative;
}
#calendar-wrap,
#tp-wrap {
width: 100%;
position: relative;
}
.checkmark-img {
display: none;
z-index: 1;
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
}
.calendar-check {
display: none;
}
.package-check-toggle {
position: relative;
height: 100%;
width: 100%;
display: block;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="calendar-wrap" class="calendar-wrap">
<h2 class="product-titles">Package 1</h2>
<label for="package-check-1" class="package-check-toggle">
<img src="http://jwilson.coe.uga.edu/emt725/SqToAcuteTri/Square.gif" alt="Package 1" class="package-img" id="calendar-img" />
<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/835-200.png" alt="Package 1" class="checkmark-img" />
</label>
<input type="checkbox" class="calendar-check" id="package-check-1" />
</div>
<div id="calendar-wrap" class="calendar-wrap">
<h2 class="product-titles">Package 2</h2>
<label for="package-check-2" class="package-check-toggle">
<img src="http://jwilson.coe.uga.edu/emt725/SqToAcuteTri/Square.gif" alt="Package 2" class="package-img" id="calendar-img" />
<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/835-200.png" alt="Package 2" class="checkmark-img" />
</label>
<input type="checkbox" class="calendar-check" id="package-check-2" />
</div>
サンプルJSFiddle
EDIT私はCSS（3）唯一の解決策を表示するために最善考え出しcompletnessがたのために 。これは、jQueryの使用に全く依存しません。この場合も、チェックボックス（値に基づく）を考慮に入れ、トグルに基づいてチェックマークをトグルします。
マークアップは非常に簡単です。
<div class="calendar-checkmark">
<input type="checkbox" id="checkbox-1" name="checkbox1" value="true" />
<label for="checkbox-1"></label>
</div>
例：
.calendar-checkmark input[type=checkbox] {
display: none;
}
.calendar-checkmark label {
cursor:pointer;
display: block;
height: 384px;
width: 354px;
position:relative;
background: url('http://jwilson.coe.uga.edu/emt725/SqToAcuteTri/Square.gif') no-repeat center center transparent;
}
.calendar-checkmark label::after {
content:' ';
display: block;
height: 100%;
width: 100%;
position: absolute;
z-index:1;
display:none;
background: url('https://d30y9cdsu7xlg0.cloudfront.net/png/835-200.png') no-repeat center center transparent;
}
.calendar-checkmark input[type=checkbox]:checked + label::after {
display: block;
}
<div class="calendar-checkmark">
<input type="checkbox" id="checkbox-1" name="checkbox1" value="true" />
<label for="checkbox-1"></label>
</div>
ここにトリックはあなたが別の要素のベース隣接兄弟を選択することができるようAdjacent sibling selectorsを使用しています。したがって、チェックボックスをオンにしたときにCSSを見ると、:hoverなどと同様にPsudo-class:checkedが適用されます。次に隣接する+セレクタを使用してlabelを探します。
これで、label要素のCSS背景が四角形のボックスの画像に設定されています。次にpsudo-class ::afterが適用され、チェックボックスを含むpsudo-elementが作成されます。要素の後に追加されます。チェックボックスがcheckedの場合、psudoクラス:checkedが指定されます。これは、要素を表示することによってpsudo要素の状態を変更します。
Another Fiddle
それを取得するために、兄弟セレクタを使用する必要があります。私はCSSのバージョンを含むように私の答えを更新しました。 Javascriptは必要ありません。 – Nico