javascript - 单击时，添加类直到复选框/标签被单击

转载作者：太空宇宙更新时间：2023-11-04 13:09:48

上下文:

我正在使用 sprite-sheet 和 jQuery 设计一个复选框。

我希望“焦点”状态的行为与此 free HTML5 template 中的复选框完全一样:

“焦点”/“模糊”指的是复选框周围的彩色边框:

...出现在选项卡上的复选框中，单击复选框或单击标签。
...在复选框外的选项卡上消失，点击复选框外或点击标签。

我的代码:

到目前为止，我只实现了描述的“焦点”/“模糊”在复选框的进/出上。

作为 JSFiddle:

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

作为 HTML 页面:

(作为 Stack Overflow 片段发布时，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
  });

关于javascript - 单击时，添加类直到复选框/标签被单击，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34881637/