it-swarm.com.de

Verwenden Sie Bilder wie Kontrollkästchen

Ich hätte gerne eine Alternative zu einem Standard-Ankreuzfeld - grundsätzlich möchte ich Bilder verwenden. Wenn der Benutzer das Bild anklickt, blendet es aus und fügt ein Ankreuzfeld ein.

Im Grunde möchte ich etwas wie Recaptcha 2 tun, wenn Sie Bilder anklicken, die bestimmte Kriterien erfüllen. Sie können eine Recaptcha-Demo hier sehen , aber manchmal werden Sie dazu aufgefordert, Textfragen zu beantworten, im Gegensatz zur Bildauswahl. Also hier ein Screenshot:

Google Recaptcha screenshot

Wenn Sie auf eines der Bilder klicken (in diesem Fall ein Steak-Bild), verkleinert sich das Bild, auf das Sie klicken, und das blaue Häkchen erscheint, um anzuzeigen, dass Sie es angekreuzt haben.

Nehmen wir an, ich möchte genau dieses Beispiel wiedergeben.

Ich erkenne, dass ich 9 ausgeblendete Kontrollkästchen haben kann, und füge ein wenig jQuery hinzu, so dass beim Klicken auf das Bild das ausgeblendete Kontrollkästchen ausgewählt bzw. die Auswahl aufgehoben wird. Aber was ist mit dem Verkleinern des Bildes/Überlagern des Ticks?

154
bgs264

Reine semantische HTML/CSS-Lösung

Dies ist einfach zu implementieren, es ist keine vorgefertigte Lösung erforderlich. Es wird Ihnen auch eine Menge beibringen, da Sie mit CSS nicht zu einfach erscheinen. 

Das müssen Sie tun:

Ihre Kontrollkästchen müssen eindeutige id-Attribute haben. Auf diese Weise können Sie einen <label> mit dem for- Attribut des Labels verbinden.

Beispiel:

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

Das Anbringen des Etiketts an das Kontrollkästchen löst ein Browserverhalten aus: Wenn jemand auf das Etikett (oder das darin befindliche Bild) klickt, wird das Kontrollkästchen aktiviert.

Als Nächstes blenden Sie das Kontrollkästchen aus, indem Sie beispielsweise display: none; darauf anwenden.

Jetzt müssen Sie nur noch den gewünschten Stil für Ihr label::before-Pseudoelement festlegen (das als Ersetzungselement für das visuelle Kontrollkästchen verwendet wird):

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

In einem letzten kniffligen Schritt verwenden Sie den CSS-Pseudo-Selector :checked, um das Bild zu ändern, wenn das Kontrollkästchen aktiviert ist:

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

Der + (benachbarter gleichgeordneter Selektor) stellt sicher, dass Sie nur Labels ändern, die direkt dem ausgeblendeten Kontrollkästchen im Markup folgen.

Sie können dies optimieren, indem Sie beide Bilder in eine Spritemap aufnehmen und nur eine Änderung in background-position vornehmen, anstatt das Bild zu vertauschen.

Natürlich müssen Sie das Etikett richtig positionieren und display: block; anwenden und korrekte width und height einstellen.

Bearbeiten:

Das Codepen-Beispiel und das Snippet, die ich nach diesen Anweisungen erstellt habe, verwenden die gleiche Technik, . Statt Bilder für die Kontrollkästchen zu verwenden, werden die Kontrollkästchen jedoch nur mit CSS ersetzt, wodurch ein ::before auf dem Label erstellt wird, das einmal geprüft wurde hat content: "✓";. Fügen Sie einige abgerundete Rahmen und süße Übergänge hinzu und das Ergebnis ist wirklich sympathisch!

Hier ist ein funktionierender Codepen, der die Technik zeigt und keine Bilder für das Kontrollkästchen benötigt:

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

Hier ist derselbe Code in einem Snippet:

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="http://lorempixel.com/100/100" /></label>
  </li>
  <li><input type="checkbox" id="cb2" />
    <label for="cb2"><img src="http://lorempixel.com/101/101" /></label>
  </li>
  <li><input type="checkbox" id="cb3" />
    <label for="cb3"><img src="http://lorempixel.com/102/102" /></label>
  </li>
  <li><input type="checkbox" id="cb4" />
    <label for="cb4"><img src="http://lorempixel.com/103/103" /></label>
  </li>
</ul>

278
connexo

Reine CSS-Lösung

Es werden drei ordentliche Geräte aufgerufen:

  1. Der :checked Selektor
  2. Der ::before Pseudo-Selektor
  3. Die Eigenschaft css content .

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>

28
jcuenod

Siehe dieses jQuery-Plugin: imgCheckbox (bei npm und bower)

Disclaimer: Zur Lösung dieses Problems ist kein Javascript erforderlich. Das Spannungsfeld liegt zwischen Wartbarkeit und Effizienz des Codes. Zwar ist kein Plugin (oder Javascript) erforderlich, aber es ist schneller zu erstellen und oft einfacher zu ändern.

Barebones-Lösung:

Mit sehr einfachem HTML (kein Durcheinander mit Kontrollkästchen und Beschriftungen usw.):

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

Sie können die toggleClass von jQuery verwenden, um eine selected- oder checked-Klasse im click-Ereignis ein- oder auszuschalten:

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

Geprüfte Artikel werden mit abgerufen

$(".checked")

Plus Coolness:

Sie können die Bilder auf dieser Basis formatieren, aber ein großes Problem ist, dass Sie ohne andere DOM-Elemente nicht einmal ::before und ::after verwenden können, um Dinge wie Häkchen hinzuzufügen. Die Lösung besteht darin, Ihre Bilder mit einem anderen Element zu umschließen (und es ist sinnvoll, den Klick-Listener auch an das umschlossene Element anzuhängen).

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

Dadurch ist Ihre HTML-Datei wirklich sauber und Ihre Js sind unglaublich lesbar. Schauen Sie sich den Ausschnitt an ...

/* 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" />

Verwenden des Plugins imgCheckbox jQuery:

Inspiriert von der obigen Lösung habe ich ein Plugin erstellt, das so einfach verwendet werden kann wie:

$("img").imgCheckbox();
  • Spritzt die Daten für geprüfte Bilder in Ihr Formular ein
  • Unterstützt benutzerdefinierte Häkchen
  • Unterstützt angepasste CSS
  • Unterstützt vorgewählte Elemente
  • Unterstützt Radiogruppen, anstatt Bilder einfach umzuschalten
  • Hat Ereignisrückrufe
  • Vernünftige Standardeinstellungen
  • Leicht und super einfach zu bedienen

Siehe in Aktion (und siehe Quelle )

8
jcuenod

Ich würde ein zusätzliches div mit position: relative; und class="checked" hinzufügen, das die gleiche Breite/Höhe wie das Bild hat und die Position in left: 0; top: 0;, die das Symbol enthält. Es beginnt mit display: none;.

Jetzt können Sie sich das Ereignis click- anhören:

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

Auf diese Weise können Sie das Symbol erhalten und das Bild auch verkleinern.

Hinweis: Ich wollte Ihnen nur die "Logik" hinter meinen Gedanken zeigen, dieses Beispiel funktioniert möglicherweise nicht oder weist einige Fehler auf.

6
Cagatay Ulubay

Hier ein schnelles Beispiel für die Auswahl eines Bildes wie ein Kontrollkästchen

Aktualisiertes Beispiel mit 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>

2
Chris Beckett

Ich habe bemerkt, dass andere Antworten entweder <label> nicht verwenden (warum nicht?) Oder die Übereinstimmung von for und id-Attributen erfordern. Das heißt, wenn Sie IDs überschneiden, funktioniert Ihr Code nicht und Sie müssen daran denken, jedes Mal eine eindeutige ID zu erstellen.

Wenn Sie die input mit display:none oder visibility:hidden ausblenden, wird der Browser nicht darauf fokussieren.

Ein Kontrollkästchen und sein Text (oder in diesem Fall ein Bild) können in ein Etikett eingeschlossen werden:

.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>

2
rybo111

Um die akzeptierte Antwort für alle Benutzer zu erweitern, die WordPress & GravityForms verwenden, um ihre Formulare zu generieren, und die Kontrollkästchenfelder automatisch mit einer Liste von Beiträgen und ihrer zugeordneten Miniaturansicht ausfüllen möchten 

// 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;
}

Und das 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;
}
0
essexboyracer