Użyj obrazów takich jak pola wyboru
Chciałbym mieć alternatywę dla standardowego checkboxa-w zasadzie chciałbym użyć obrazków, a gdy użytkownik kliknie obrazek, zniknie go i nałoży pole wyboru.
W istocie, chcę zrobić coś takiego jak Recaptcha 2 robi, gdy skłania cię do klikania obrazów, które spełniają określone kryteria. Możesz zobaczyć demo Recaptcha tutaj , ale czasami może to skłonić cię do rozwiązania pytań tekstowych, w przeciwieństwie do wyboru obrazu. Więc oto zrzut ekranu:
Po kliknięciu jednego z obrazów (w tym przypadku zawierającego zdjęcie steku) obraz, który klikasz, zmniejsza się jego rozmiar i pojawia się niebieski znacznik wskazujący, że go zaznaczyłeś.
Powiedzmy, że chcę odtworzyć ten dokładny przykład.
Zdaję sobie sprawę, że mogę mieć 9 ukrytych checkboxów i załączyć trochę jQuery tak, że po kliknięciu obrazka zaznacza / usuwa Ukryte checkboxy. Ale co z kurczeniem się obrazu/nakładaniem kleszcza?
7 answers
Czyste semantyczne rozwiązanie HTML/CSS
Jest to łatwe do wdrożenia we własnym zakresie, nie wymaga gotowych rozwiązań. Nauczy Cię również wiele, ponieważ nie wydajesz się zbyt łatwy w CSS.
Oto co musisz zrobić:
Twoje pola wyboru muszą mieć różne atrybuty id
. Pozwala to na podłączenie <label>
do niego, używając atrybutu for
etykiety.
Przykład:
<input type="checkbox" id="myCheckbox1" />
<label for="myCheckbox1"><img src="http://someurl" /></label>
Dołączenie etykiety do checkboxa spowoduje zachowanie przeglądarki: ilekroć jeśli ktoś kliknie etykietę (lub znajdujący się w niej obraz), pole wyboru zostanie przełączone.
Następnie ukrywasz pole wyboru, aplikując na przykład display: none;
do niego.
Teraz pozostaje tylko ustawić styl, który chcesz dla swojego pseudo elementu label::before
(który będzie używany jako wizualne elementy zastępujące pole wyboru):
label::before {
background-image: url(../path/to/unchecked.png);
}
W ostatnim trudnym kroku, używasz pseudo selektora CSS :checked
, aby zmienić obraz, gdy pole wyboru jest zaznaczone:
:checked + label::before {
background-image: url(../path/to/checked.png);
}
The +
(sąsiednie selektor rodzeństwa ) upewnia się, że zmieniasz tylko etykiety bezpośrednio po ukrytym polu wyboru w znacznikach.
Możesz to zoptymalizować, umieszczając oba obrazy na spritemapie i stosując tylko zmianę w background-position
zamiast zamieniać obraz.
Oczywiście należy odpowiednio ustawić etykietę i zastosować display: block;
oraz ustawić poprawne width
i height
.
Edit:
Przykład codepen i fragment, który stworzyłem po tych instrukcjach, używają tej samej techniki, ale zamiast używać obrazków dla pól wyboru, zastępowanie pól wyboru odbywa się wyłącznie za pomocą CSS , tworząc ::before
na etykiecie, która po sprawdzeniu ma content: "✓";
. Dodaj zaokrąglone obramowania i słodkie przejścia, a wynik będzie naprawdę przyjemny!
Oto ten sam kod w fragment:
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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-06-20 09:12:55
Pure CSS Solution
Wywoływane są trzy zgrabne urządzenia:
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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-03-08 04:49:30
Zobacz ten plugin jQuery: imgCheckbox (on npm oraz bower)
Zastrzeżenie: nie javascript jest konieczne, aby rozwiązać ten problem. Napięcie jest między konserwowalnością a efektywnością kodu. Chociaż nie ma potrzeby stosowania wtyczki (ani żadnego javascript), z pewnością przyspiesza budowanie i często ułatwia zmianę.
Rozwiązanie Barebones:
Z bardzo prosty HTML (żaden z bałagan z pól wyboru i etykiet itp.):
<img class="checkable" src="http://lorempixel.com/100/100" />
Możesz użyć jQuery toggleClass aby włączyć / wyłączyć klasę selected
lub checked
w zdarzeniu click
:
$("img.checkable").click(function () {
$(this).toggleClass("checked");
});
Zaznaczone elementy są pobierane za pomocą
$(".checked")
Plus Chłód:
Możesz stylizować obrazy na podstawie tego, ale dużym problemem jest to, że bez innych elementów DOM nie możesz nawet użyć ::before
i ::after
do dodawania takich elementów jak znaczniki kontrolne. Rozwiązaniem jest owinięcie obrazów innym elementem (i to sprawia, że sens dołączania słuchacza kliknięć do zawiniętego elementu).
$("img.checkable").wrap("<span class='fancychecks'>")
To pozostawia Twój html naprawdę czysty, a Twój js niewiarygodnie czytelny. Spójrz na fragment...
/* 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" />
Korzystanie z imgCheckbox jQuery Plugin:
Zainspirowany powyższym rozwiązaniem, zbudowałem wtyczkę, która może być używana tak łatwo, jak:
$("img").imgCheckbox();
- wstrzykuje dane dla sprawdzonych obrazów do formularza
- obsługuje niestandardowe znaki kontrolne
- obsługuje Niestandardowy CSS
- obsługuje wstępnie wybrane elementy
- obsługuje grupy radiowe zamiast prostego przełączania obrazów
- ma wywołania zdarzeń
- Sensible defaults
- lekki i super łatwy w użyciu
Zobacz też w akcji (i zobacz źródło )
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-08-10 19:19:02
Dodałbym dodatkowy div z position: relative;
i class="checked"
, który ma taką samą szerokość/wysokość jak obraz i niż pozycję w left: 0; top: 0;
zawierającą ikonę. Zaczyna się od display: none;
.
Teraz możesz posłuchać click
-event:
$( '.captcha_images' ).click( function() {
$(this + '.checked').css( 'display', 'block' );
$(this).animate( { width: '70%', height: '70%' } );
});
W ten sposób możesz uzyskać ikonę, a także zmienić rozmiar obrazu na mniejszy.
Uwaga: chciałem tylko pokazać "logikę" za moimi myślami, ten przykład może nie działać lub ma jakieś błędy w nim.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-06-05 10:08:35
Zauważyłem, że inne odpowiedzi też nie używają <label>
(Dlaczego nie?), lub wymagają dopasowania atrybutów for
i id
. Oznacza to, że jeśli masz sprzeczne identyfikatory, Twój kod nie będzie działał i musisz pamiętać, aby za każdym razem tworzyć unikalne identyfikatory.
Ponadto, jeśli schowasz input
za pomocą display:none
lub visibility:hidden
, przeglądarka nie będzie się na niej skupiać.
Pole wyboru i jego tekst (lub w tym przypadku obrazek) mogą być zawinięte w etykietę:
.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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-06-21 12:35:44
Oto szybki przykład wybrania obrazu jak checkbox
Zaktualizowany przykład za pomocą 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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-06-12 07:20:44
Aby rozwinąć akceptowaną odpowiedź dla każdego, kto używa WordPress & GravityForms do generowania formularzy i chce automatycznie wypełniać pola wyboru listą postów i powiązanymi z nimi miniaturkami
// 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;
}
I 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;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-08-05 17:29:40