Saya ingin memiliki alternatif untuk kotak centang standar - pada dasarnya saya ingin menggunakan gambar dan ketika pengguna mengklik gambar, fade out dan overlay kotak centang.

Intinya, saya ingin melakukan sesuatu seperti yang dilakukan Recaptcha 2 ketika Anda mengklik gambar yang memenuhi kriteria tertentu. Anda dapat melihat demo Recaptcha di sini, tetapi kadang-kadang mungkin membuat Anda menyelesaikan pertanyaan teks, sebagai lawan dari pemilihan gambar. Jadi, inilah tangkapan layar:

Ketika Anda mengklik salah satu gambar (dalam hal ini, berisi gambar steak), gambar yang Anda klik menyusut dalam ukuran dan centang biru muncul, menunjukkan bahwa Anda telah mencentangnya.

Katakanlah saya ingin mereproduksi contoh persis ini.

Saya menyadari bahwa saya dapat memiliki 9 kotak centang tersembunyi, dan melampirkan beberapa jQuery sehingga ketika saya mengklik gambar, itu memilih / membatalkan pilihan kotak centang tersembunyi. Tapi bagaimana dengan penyusutan gambar / overlay kutu?

Solusi HTML / CSS semantik murni

Ini mudah diimplementasikan sendiri, tidak perlu solusi pra-dibuat. Juga akan banyak mengajari Anda karena Anda tampaknya tidak terlalu mudah dengan CSS.

Ini adalah hal yang perlu kamu lakukan:

Kotak centang Anda harus memiliki idatribut yang berbeda . Ini memungkinkan Anda untuk menghubungkannya <label>, menggunakan label for-atribut.

Contoh:

<input type="checkbox" id="myCheckbox1" />
<label for="myCheckbox1"><img src="http://someurl" /></label>

Melampirkan label ke kotak centang akan memicu perilaku browser: Setiap kali seseorang mengklik label (atau gambar di dalamnya), kotak centang akan diaktifkan.

Selanjutnya, Anda menyembunyikan kotak centang dengan menerapkan misalnya display: none;untuk itu.

Sekarang yang perlu dilakukan hanyalah mengatur gaya yang Anda inginkan untuk label::beforeelemen semu Anda (yang akan digunakan sebagai elemen penggantian kotak centang visual):

label::before {
    background-image: url(../path/to/unchecked.png);
}

Pada langkah rumit terakhir, Anda menggunakan :checkedpemilih palsu CSS untuk mengubah gambar ketika kotak centang dicentang:

:checked + label::before {
    background-image: url(../path/to/checked.png);
}

The +( berdekatan saudara pemilih ) memastikan Anda hanya mengubah label yang langsung mengikuti centang tersembunyi di markup.

Anda dapat mengoptimalkannya dengan meletakkan kedua gambar dalam spritemap dan hanya menerapkan perubahan background-positionalih-alih menukar gambar.

Tentu saja Anda perlu memposisikan label dengan benar dan menerapkan display: block;serta mengatur yang benar widthdan height.

Edit:

Contoh kode dan cuplikan, yang saya buat setelah instruksi ini, menggunakan teknik yang sama, tetapi alih-alih menggunakan gambar untuk kotak centang, penggantian kotak centang dilakukan murni dengan CSS , membuat ::beforelabel yang telah, setelah diperiksa, memiliki content: "✓";. Tambahkan beberapa batas bulat dan transisi manis dan hasilnya benar-benar disukai!

Berikut adalah codepen yang berfungsi yang menampilkan teknik dan tidak memerlukan gambar untuk kotak centang:

http://codepen.io/anon/pen/wadwpx

Berikut ini kode yang sama dalam cuplikan:

ul {
  list-style-type: none;
}

li {
  display: inline-block;
}

input[type="checkbox"][id^="cb"] {
  display: none;
}

label {
  border: 1px solid #fff;
  padding: 10px;
  display: block;
  position: relative;
  margin: 10px;
  cursor: pointer;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

label::before {
  background-color: white;
  color: white;
  content: " ";
  display: block;
  border-radius: 50%;
  border: 1px solid grey;
  position: absolute;
  top: -5px;
  left: -5px;
  width: 25px;
  height: 25px;
  text-align: center;
  line-height: 28px;
  transition-duration: 0.4s;
  transform: scale(0);
}

label img {
  height: 100px;
  width: 100px;
  transition-duration: 0.2s;
  transform-origin: 50% 50%;
}

:checked+label {
  border-color: #ddd;
}

:checked+label::before {
  content: "✓";
  background-color: grey;
  transform: scale(1);
}

:checked+label img {
  transform: scale(0.9);
  box-shadow: 0 0 5px #333;
  z-index: -1;
}

<ul>
  <li><input type="checkbox" id="cb1" />
    <label for="cb1"><img src="https://picsum.photos/seed/1/100" /></label>
  </li>
  <li><input type="checkbox" id="cb2" />
    <label for="cb2"><img src="https://picsum.photos/seed/2/100" /></label>
  </li>
  <li><input type="checkbox" id="cb3" />
    <label for="cb3"><img src="https://picsum.photos/seed/3/100" /></label>
  </li>
  <li><input type="checkbox" id="cb4" />
    <label for="cb4"><img src="https://picsum.photos/seed/4/100" /></label>
  </li>
</ul>

Solusi CSS murni

Ada tiga perangkat rapi yang dipanggil:

1. The :checkedpemilih
2. The ::beforepseudo-selector
3. contentProperti css .

label:before {
  content: url("https://cdn1.iconfinder.com/data/icons/windows8_icons_iconpharm/26/unchecked_checkbox.png");
  position: absolute;
  z-index: 100;
}
:checked+label:before {
  content: url("https://cdn1.iconfinder.com/data/icons/windows8_icons_iconpharm/26/checked_checkbox.png");
}
input[type=checkbox] {
  display: none;
}
/*pure cosmetics:*/
img {
  width: 150px;
  height: 150px;
}
label {
  margin: 10px;
}

<input type="checkbox" id="myCheckbox1" />
<label for="myCheckbox1">
  <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcR0LkgDZRDTgnDrzhnXGDFRSItAzGCBEWEnkLMdnA_zkIH5Zg6oag">
</label>
<input type="checkbox" id="myCheckbox2" />
<label for="myCheckbox2">
  <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRhJjGB3mQxjhI5lfS9SwXou06-2qT_0MjNAr0atu75trXIaR2d">
</label>
<input type="checkbox" id="myCheckbox3" />
<label for="myCheckbox3">
  <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQuwWbUXC-lgzQHp-j1iw56PIgl_2eALrEENUP-ld72gq3s8cVo">
</label>

Melihat plugin jQuery ini: imgCheckbox (pada NPM dan bower )

Penafian: Tidak diperlukan javascript untuk menyelesaikan masalah ini. Ketegangan adalah antara rawatan dan efisiensi kode. Meskipun tidak perlu untuk plugin (atau javascript), itu tentu membuatnya lebih cepat untuk membangun dan sering lebih mudah untuk berubah.

Solusi Barebones:

Dengan HTML yang sangat sederhana (tidak ada kekacauan dengan kotak centang dan label dll.):

<img class="checkable" src="http://lorempixel.com/100/100" />

Anda dapat menggunakan jQuery toggleClass untuk mengaktifkan / menonaktifkan selectedatau checkedkelas pada clickacara:

$("img.checkable").click(function () {
    $(this).toggleClass("checked");
});

Barang yang diperiksa diambil dengan

$(".checked")

Ditambah kesejukan:

Anda dapat mendesain gambar berdasarkan ini tetapi masalah besar adalah bahwa tanpa elemen DOM lainnya Anda bahkan tidak dapat menggunakan ::beforedan ::aftermenambahkan hal-hal seperti tanda centang. Solusinya adalah membungkus gambar Anda dengan elemen lain (dan masuk akal juga untuk melampirkan pendengar klik ke elemen yang dibungkus).

$("img.checkable").wrap("<span class='fancychecks'>")

Ini membuat html Anda benar-benar bersih dan js Anda sangat mudah dibaca. Lihatlah cuplikan ...

/* Note that this js actually responds
   to a click event on the wrapped element!
   (not the image) */
$("img.checkable").wrap("<span class='fancychecks'>")
  .parent().click(function() {
    $(this).toggleClass("checked");
  });

/* style the images */
span.fancychecks img {
  display: block;
  margin: 0;
  padding: 0;
  transition-duration: 300ms;
  transform: scale(1);
  filter: none;
  -webkit-filter: grayscale(0);
}
span.fancychecks.checked img {
  transform: scale(0.8);
  filter: gray;
  filter: grayscale(1);
  -webkit-filter: grayscale(1);
}

/* style the parent spans */
span.fancychecks {
  padding: 0;
  margin: 5px;
  display: inline-block;
  border: 1px solid transparent;
  transition-duration: 300ms;
}
span.fancychecks.checked {
  border-color: #ccc;
}

/* Using conexo's fantastic CSS, make the checkmarks */
span.fancychecks::before {
  background-color: rgba(50, 200, 50, 0.7);
  color: white;
  content: "✓";
  font-weight: bold;
  border-radius: 50%;
  position: absolute;
  margin: 2px;
  top: 1;
  left: 1;
  z-index: 1;
  width: 25px;
  height: 25px;
  text-align: center;
  line-height: 28px;
  transform: scale(0);
  transition-duration: 300ms;
}
span.fancychecks.checked::before {
  transform: scale(1);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<img class="checkable" src="http://lorempixel.com/100/100/city/1" />
<img class="checkable" src="http://lorempixel.com/100/100/city/2" />
<img class="checkable" src="http://lorempixel.com/100/100/city/3" />

Menggunakan Plugin jQuery imgCheckbox :

Terinspirasi oleh solusi di atas, saya telah membangun sebuah plugin yang dapat digunakan semudah:

$("img").imgCheckbox();

• Suntikkan data untuk gambar yang diperiksa ke dalam formulir Anda
• Mendukung tanda centang khusus
• Mendukung CSS yang disesuaikan
• Mendukung elemen yang dipilih sebelumnya
• Mendukung grup radio alih-alih beralih-pindah gambar
• Memiliki callback acara
• Default yang masuk akal
• Ringan dan super mudah digunakan

Lihat dalam aksi (dan lihat sumbernya )

Saya akan menambahkan div tambahan dengan position: relative;dan class="checked"yang memiliki lebar / tinggi yang sama dengan gambar memiliki dan dari posisi dalam left: 0; top: 0;mengandung ikon. Dimulai dengan display: none;.

Sekarang Anda dapat mendengarkan clickacara-:

$( '.captcha_images' ).click( function() {
    $(this + '.checked').css( 'display', 'block' );
    $(this).animate( { width: '70%', height: '70%' } );
});

Dengan cara ini Anda bisa mendapatkan ikon dan juga mengubah ukuran gambar ke cara yang lebih kecil.

Perhatikan: Hanya ingin menunjukkan "logika" di balik pikiran saya, contoh ini mungkin tidak berfungsi atau memiliki beberapa bug di dalamnya.

Saya perhatikan jawaban lain yang tidak digunakan <label>(mengapa tidak?), Atau memerlukan kecocokan fordan idatribut. Ini berarti jika Anda memiliki ID bentrok, kode Anda tidak akan berfungsi, dan Anda harus ingat untuk membuat ID unik setiap kali.

Juga, jika Anda menyembunyikan inputdengan display:noneatau visibility:hidden, browser tidak akan fokus padanya.

Kotak centang dan teksnya (atau dalam hal ini, gambar) dapat dibungkus dengan label:

.fancy-checkbox-label > input[type=checkbox] {
  position: absolute;
  opacity: 0;
  cursor: inherit;
}
.fancy-checkbox-label {
  font-weight: normal;
  cursor: pointer;
}
.fancy-checkbox:before {
  font-family: FontAwesome;
  content: "\f00c";
  background: #fff;
  color: transparent;
  border: 3px solid #ddd;
  border-radius: 3px;
  z-index: 1;
}
.fancy-checkbox-label:hover > .fancy-checkbox:before,
input:focus + .fancy-checkbox:before {
  border-color: #bdbdff;
}
.fancy-checkbox-label:hover > input:not(:checked) + .fancy-checkbox:before {
  color: #eee;
}
input:checked + .fancy-checkbox:before {
  color: #fff;
  background: #bdbdff;
  border-color: #bdbdff;
}
.fancy-checkbox-img:before {
  position: absolute;
  margin: 3px;
  line-height: normal;
}
input:checked + .fancy-checkbox-img + img {
  transform: scale(0.9);
  box-shadow: 0 0 5px #bdbdff;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
<p>
  <label class="fancy-checkbox-label">
    <input type="checkbox">
    <span class="fancy-checkbox"></span>
    A normal checkbox
  </label>
</p>
<p>
  <label class="fancy-checkbox-label">
    <input type="checkbox">
    <span class="fancy-checkbox fancy-checkbox-img"></span>
    <img src="http://placehold.it/150x150">
  </label>
</p>

Di sini contoh cepat memilih gambar seperti kotak centang

Contoh yang Diperbarui menggunakan Knockout.js:

var imageModel = function() {
    this.chk = ko.observableArray();
};
ko.applyBindings(new imageModel());

    input[type=checkbox] {
        display:none;
      }
 
  input[type=checkbox] + label
   {
       display:inline-block;
        width:150px;
        height:150px;
        background:#FBDFDA;
        border:none;
   }
   
   input[type=checkbox]:checked + label
    {
        background:#CFCFCF;
        border:none;
        position:relative;
        width:100px;
        height:100px;
        padding: 20px;
    }

   input[type=checkbox]:checked + label:after
    {
        content: '\2713';
        position:absolute;
        top:-10px;
        right:-10px;
        border-radius: 10px;
        width: 25px;
        height: 25px;
        border-color: white;
        background-color: blue;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.0.0/knockout-min.js"></script>
<input type='checkbox' name='image1' value='image1' id="image1" data-bind="checked: chk"/><label for="image1"></label><label for="image1"><img class='testbtn'/></label>

<div data-bind="html: chk"></div>

Untuk memperluas jawaban yang diterima bagi siapa saja yang menggunakan WordPress & GravityForms untuk menghasilkan formulir mereka dan ingin secara otomatis mengisi bidang kotak centang dengan daftar posting dan Thumbnail Unggulan mereka yang terkait

// Change '2' to your form ID
add_filter( 'gform_pre_render_2', 'populate_checkbox' );
add_filter( 'gform_pre_validation_2', 'populate_checkbox' );
add_filter( 'gform_pre_submission_filter_2', 'populate_checkbox' );
add_filter( 'gform_admin_pre_render_2', 'populate_checkbox' );

function populate_checkbox( $form ) {

    foreach( $form['fields'] as &$field )  {

        // Change '41' to your checkbox field ID
        $field_id = 41;
        if ( $field->id != $field_id ) {
            continue;
        }

        // Adjust $args for your post type
        $args = array(
                'post_type' => 'pet',
                'post_status' => 'publish',
                'posts_per_page' => -1,
                'tax_query' => array(
                        array(
                                'taxonomy' => 'pet_category',
                                'field' => 'slug',
                                'terms' => 'cat'
                        )
                )
        );

        $posts = get_posts( $args );

        $input_id = 1;

        foreach( $posts as $post ) {

            $feat_image_url = wp_get_attachment_image( get_post_thumbnail_id( $post->ID ), 'thumbnail' );
            $feat_image_url .= '<br />' . $post->post_title;

            if ( $input_id % 10 == 0 ) {
                $input_id++;
            }

            $choices[] = array( 'text' => $feat_image_url, 'value' => $post->post_title );
            $inputs[] = array( 'label' => $post->post_title, 'id' => "{$field_id}.{$input_id}" );

            $input_id++;
        }

        $field->choices = $choices;
        $field->inputs = $inputs;

    }

    return $form;
}

Dan CSS:

.gform_wrapper .gfield_checkbox li[class^="gchoice_2_41_"] {
    display: inline-block;
}

.gform_wrapper .gfield_checkbox li input[type="checkbox"][id^="choice_2_41_"] {
    display: none;
}


.gform_wrapper .gfield_checkbox li label[id^="label_2_41_"] {
    border: 1px solid #fff;
    padding: 10px;
    display: block;
    position: relative;
    margin: 10px;
    cursor: pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

label[id^="label_2_41_"]:before {
    font-family: "font-icons";
    font-size: 32px;
    color: #1abc9c;
    content: " ";
    display: block;
    background-color: transparent;
    position: absolute;
    top: -5px;
    left: -5px;
    width: 25px;
    height: 25px;
    text-align: center;
    line-height: 28px;
    transition-duration: 0.4s;
    transform: scale(0);
}

label[id^="label_2_41_"] img {
    transition-duration: 0.2s;
    transform-origin: 50% 50%;
}

:checked + label[id^="label_2_41_"] {
    border-color: #ddd;
}

/* FontAwesome tick */
:checked + label[id^="label_2_41_"]:before {
    content: "\e6c8";
    background-color: transparent;
    transform: scale(1);
}

:checked + label[id^="label_2_41_"] img {
    transform: scale(0.9);
    box-shadow: 0 0 5px #333;
    z-index: 0;
}