单击时，添加类，直到复选框/标签单击关闭

On click, add class until checkbox/label clicked off

本文关键字：单击 标签 复选框 添加      更新时间：2023-09-26

Context：

我正在使用精灵表和jQuery设置复选框样式。

我希望"焦点"状态的行为与这个免费的HTML5模板上的复选框完全相同：

通过"焦点"/"模糊"，我指的是复选框周围的彩色边框：

  1. 。出现在选项卡进入复选框上，单击复选框或单击标签。
  2. 。在 Tab 上消失在复选框外、单击退出复选框或单击关闭标签上。

我的代码：

到目前为止，我只在跳入/跳出复选框时实现了所描述的"焦点"/"模糊"。

作为JSFiddle：

http://jsfiddle.net/k9mgh8rz/4/

作为 HTML 页面：

（CDN 脚本在发布为堆栈溢出代码段时不会加载）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
    input[type="text"],
    input[type="password"] {
      border: 1px solid black;
      padding: 5px;
    }
    input[type="text"]:focus,
    input[type="password"]:focus {
      border: 1px solid red;
    }
    label {
      cursor: pointer;
    }
    .forgetmenot span {
      display: inline-block;
      margin-left: 15px;
      position: relative;
      top: 3px;
    }
    /* iCheck Plugin (Skin for check-box)
    ----------------------------------- */
    .icheckbox_minimal {
      display: inline-block;
      *display: inline;
      vertical-align: middle;
      margin: 0;
      padding: 0;
      width: 30px;
      height: 30px;
      background: url(http://s10.postimg.org/lzj62spk5/check_boxes.png) no-repeat;
      border: none;
      cursor: pointer;
    }
    .icheckbox_minimal {
      background-position: 0 0;
    }
    .icheckbox_minimal.checked {
      background-position: -60px 0;
    }
    .icheckbox_minimal.focus {
      background-position: -30px 0;
    }
    .icheckbox_minimal.checked.focus {
      background-position: -90px 0;
    }
    /* HiDPI support */
    @media (-o-min-device-pixel-ratio: 5/4),
    (-webkit-min-device-pixel-ratio: 1.25),
    (min-resolution: 120dpi),
    (min-resolution: 1.25dppx) {
      .icheckbox_minimal {
        background-image: url(http://s16.postimg.org/k51empanp/check_boxes_2x.png);
        -webkit-background-size: 200px 20px;
        background-size: 200px 20px;
      }
    }
    </style>
</head>
<body>
    <!--Mark-up cannot be edited for the purposes of the required solution.-->
    <p>
        <label for="user_login">Username<br>
            <input class="input" id="user_login" name="log" size="20" type="text" value="">
        </label>
    </p>
    <p>
        <label for="user_pass">Password<br>
            <input class="input" id="user_pass" name="pwd" size="20" type="password" value="">
        </label>
    </p>
    <p class="forgetmenot">
        <label for="rememberme">
            <input id="rememberme" name="rememberme" type="checkbox" value="forever"> Remember Me
        </label>
    </p>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.1.min.js"></script> 
    <script src="http://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.1/icheck.js"></script> 
    <script>
    $(document).ready(function() {
      //Add span for styling.
      $('#rememberme').each(function() {
        $(this.nextSibling).wrap('<span><'/span>');
      });
      //Apply iCheck
      $('input').iCheck({
        checkboxClass: 'icheckbox_minimal'
      });
    });
    </script>
</body>
</html>

我的问题：

使用上面的JSFiddle，仅修改jQuery和CSS（而不是标记），如何实现所描述的"焦点"/"模糊"，单击复选框并单击标签的开/关？

像这样：

  $('input').on('click change', function()
  {
     $('input').css('border-color', 'black'); // reset all inputs to black
     $(this).css('border-color', 'red'); // define the current one as red
  });
相关文章：