使用复选框等图像

时间：2015-06-05 09:55:02

标签： javascript jquery css html5

我希望有一个标准复选框的替代方案 - 基本上我想使用图像，当用户点击图像时，将其淡出并覆盖一个勾选框。

从本质上讲，我想做一些类似于Recaptcha 2的功能，当它让你点击符合特定标准的图像时。您可以see a Recaptcha demo here但有时可能会让您解决文本问题，而不是图像选择。所以这是一个截图：

Google Recaptcha screenshot

当您单击其中一个图像（在这种情况下，包含牛排图片）时，您单击的图像会缩小并显示蓝色勾号，表示您已勾选它。

假设我想重现这个确切的例子。

我意识到我可以有9个隐藏的复选框，并附加一些jQuery，这样当我点击图像时，它会选择/取消选择隐藏的复选框。但是如何缩小图像/覆盖滴答声呢？

7 个答案:

答案 0 :(得分：284)

纯语义HTML / CSS解决方案

这很容易实现，无需预先制定的解决方案。此外，它会教你很多，因为你似乎不太容易使用CSS。

这是您需要做的：

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

示例：

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

+（相邻的兄弟选择器）确保您只更改标记中直接跟随隐藏复选框的标签。

您可以通过将两个图像放在一个精灵地图中并仅在background-position中应用更改而不是交换图像来优化它。

当然，您需要正确定位标签并应用display: block;并设置正确的width和height。

编辑：

我在这些说明之后创建的codepen示例和代码段使用相同的技术，但不是使用图像作为复选框，复选框替换完全使用CSS ，创建一个{{标签上的1}}，一旦选中，就有::before。添加一些圆形边框和甜蜜过渡，结果非常可爱！

这是一个工作的codepen，展示了该技术，并且不需要复选框的图像：

  

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

以下是代码段中的相同代码：

content: "✓";
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;
}

答案 1 :(得分：28)

纯CSS解决方案

有三个整洁的设备被调用：

  1. :checked选择器
  2. ::before伪选择器
  3. css content属性。

    4. ＆＃13;
    ＆＃13; 
    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;
}
    ＆＃13; 
    <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>
    ＆＃13;
    ＆＃13;
    ＆＃13;

答案 2 :(得分：8)

请参阅此jQuery插件：imgCheckbox （在 npm 和 bower ）

免责声明：无需javascript即可解决此问题。紧张是在代码的可维护性和效率之间。虽然不需要插件（或任何javascript），但它确实可以使构建更快，并且通常更容易更改。

Barebones解决方案：

非常简单的HTML （没有复选框和标签等）：

result = [s [0; cumsum(diff(s))]];

您可以使用jQuery的 toggleClass 打开/关闭<img class="checkable" src="http://lorempixel.com/100/100" /> 事件的selected或checked课程：

click

使用

获取已检查的项目 
$("img.checkable").click(function () {
    $(this).toggleClass("checked");
});

Plus Coolness：

您可以根据此设置图像样式，但一个大问题是，如果没有其他DOM元素，您甚至无法使用$(".checked") 和::before添加复选标记之类的内容。解决方案是用另一个元素包装你的图像（将点击监听器附加到包装元素也是有意义的。）

::after

这使你的html非常干净，你的js令人难以置信的可读性。看一下片段...... 

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

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

使用imgCheckbox jQuery插件：

受上述解决方案的启发，我构建了一个插件，可以像以下一样轻松使用：

<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" />
  • 将已检查图像的数据注入表单
  • 支持自定义复选标记
  • 支持自定义CSS
  • 支持预选元素
  • 支持广播组而不是简单的图像切换
  • 有事件回调
  • 明智的默认值
  • 轻巧且易于使用

查看 in action （和see the source）

答案 3 :(得分：6)

我会添加一个额外的div position: relative;和class="checked"，其宽度/高度与图片相同，而不是包含图标的left: 0; top: 0;中的位置。它以display: none;开头。

现在您可以收听click - 事件：

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

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

注意：只是想向您展示我的想法背后的“逻辑”，这个例子可能不起作用或有一些错误。

答案 4 :(得分：2)

我注意到其他答案要么不使用foreach($user->jobs as $job) { echo $job->pivot->current_salary; } （为什么不？），要么需要匹配foreach($job->users as $user) { echo $user->pivot->current_salary; } 和<label>属性。这意味着如果您有冲突的ID，您的代码将无法运行，并且您必须记住每次都创建唯一的ID。

此外，如果您使用for或id隐藏input，浏览器将无法关注它。

复选框及其文本（或在本例中为图像）可以包装在标签中：

display:none
visibility:hidden

答案 5 :(得分：1)

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

使用Knockout.js更新了示例：

＆＃13;
＆＃13; 
var imageModel = function() {
    this.chk = ko.observableArray();
};
ko.applyBindings(new imageModel());
＆＃13; 
    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;
    }
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 6 :(得分：0)

扩展使用WordPress＆amp; 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;
}
相关问题
最新问题