使用复选框之类的图像

2020/10/25 12:41 · javascript ·  · 0评论

我想要替代标准复选框-基本上,我想使用图像,并且当用户单击图像时,将其淡出并覆盖一个复选框。

本质上,当您单击符合特定条件的图像时,我想做类似Recaptcha 2的操作。您可以在此处看到Recaptcha演示,但有时可能会带您解决文本问题,而不是选择图片。所以这是屏幕截图:

Google Recaptcha屏幕截图

单击其中一张图像(在本例中,包含一张牛排的图像)时,单击的图像尺寸会缩小,并出现蓝色对勾,表示已对它进行了对勾。

假设我要重现此确切示例。

我意识到我可以有9个隐藏的复选框,并附加一些jQuery,以便当我单击图像时,它可以选择/取消选择隐藏的复选框。但是,缩小图像/覆盖刻度线又如何呢?

纯语义HTML / CSS解决方案

这很容易自己实现,不需要预制的解决方案。它还会教给您很多知识,因为您使用CSS似乎不太容易。

这是您需要做的:

您的复选框需要具有不同的id属性。这使您可以<label>使用标签的for-attribute将其连接到它

例:

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

将标签粘贴到复选框将触发浏览器行为:每当有人单击标签(或其中的图像)时,将切换复选框。

接下来,通过应用复选框来隐藏该复选框display: none;

现在剩下要做的就是为label::before伪元素设置所需的样式(它将用作可视的复选框替换元素):

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

在最后一个棘手的一步,你利用CSS的”:checked伪选择来改变图像时,复选框被选中:

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

+相邻兄弟选择器)可确保您只更改标签直接按照标记隐藏复选框。

您可以通过将两个图像都放在一个spritemap中并仅应用更改background-position而不是交换图像来优化此效果

当然,您需要正确display: block;放置标签并应用和设置正确的widthheight

编辑:

我在这些说明之后创建的codepen示例和代码段使用了相同的技术,但是复选框的替换完全是用CSS来完成的而不是使用图像作为复选框,而是::before在标签上创建了一个,一旦选中该标签便具有content: "✓";添加一些圆润的边框和甜美的过渡效果,结果真是令人愉快!

这是一个工作中的代码笔,展示了该技术,并且不需要复选框中的图像:

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

以下是片段中的相同代码:

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>

纯CSS解决方案

调用了三个整洁的设备:

  1. :checked选择
  2. ::before伪选择
  3. csscontent属性。
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>

看到这个jQuery插件:imgCheckbox(在npmbower上

免责声明:解决此问题无需使用javascript。张力介于代码的可维护性和效率之间。尽管不需要插件(或任何Javascript),但可以肯定的是,它可以加快构建速度,并且通常更易于更改。

准系统解决方案:

使用非常简单的HTML(没有复选框和标签等混乱情况):

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

您可以使用jQuery的toggleClass来打开/关闭事件中selectedcheckedclick

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

提取的已检查项目

$(".checked")

加上凉爽:

您可以基于此设置图像的样式,但是一个很大的问题是,如果没有其他DOM元素,您甚至无法使用::before::after添加诸如复选标记之类的东西。解决方案是用另一个元素包装图像(将点击侦听器也附加到包装的元素也很有意义)。

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

这使您的html真正干净,并且您的js可读性非常好。看一下片段...

使用imgCheckbox jQuery插件:

受以上解决方案的启发,我构建了一个插件,该插件可以像以下那样轻松使用:

$("img").imgCheckbox();
  • 将选中图像的数据注入到表单中
  • 支持自定义复选标记
  • 支持定制的CSS
  • 支持预选元素
  • 支持无线电组,而不是简单地切换图像
  • 有事件回调
  • 合理的默认值
  • 轻巧且超级易于使用

实际操作(并查看源代码

我将附加一个div,position: relative;并且div具有class="checked"图像相同的宽度/高度,并且比left: 0; top: 0;包含图标的位置相同它以开头display: none;

现在您可以收听click-event了:

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

这样,您可以获取图标并以较小的方式调整图像大小。

注意:仅想向您展示我的想法背后的“逻辑”,此示例可能不起作用或存在一些错误。

我注意到其他答案要么不使用<label>(为什么不使用),要么需要匹配forid属性。这意味着,如果您使用冲突的ID,则您的代码将无法工作,并且您必须记住每次都使用唯一的ID。

另外,如果您隐藏inputwithdisplay:nonevisibility:hidden,浏览器将不会专注于它。

复选框及其文本(或本例中的图像)可以包装在标签中:

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

这是一个选择像复选框这样的图像的快速示例

使用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>

为使用WordPress和GravityForms生成表单并希望自动使用帖子列表及其关联的特色缩略图填充复选框字段的任何人扩展接受的答案

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

和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;
}
本文地址:http://javascript.askforanswer.com/shiyongfuxuankuangzhileidetuxiang.html
文章标签: ,   ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!