Question

我创建了一些metro-bootstrap磁贴，代表我的Web应用程序的不同复选框选项。请在下面找到代码的HTML / JS部分：

<link rel="stylesheet" href="{{ url_for('static', filename='css/metro-bootstrap.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/metro-bootstrap.min.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/metro-bootstrap.css.map') }}">  
<link rel="stylesheet" href="{{ url_for('static', filename='css/font-awesome.min.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/font-awesome.css') }}"> 

<div class="well well-sm">
    <h2><font color="green">Features:</font></h2>
    <div class="grid">
      <div class="row col-md-12">
        <div class="tile tile-custom tile-turquoise col-xs-6 col-md-2">
            <div class="checkbox col-md-5">
            <p><h4>{{ form.profiles }}</h4></p>
            <a href="#" class="fa-links">
                <h1> Opt 1 </h1>
                <i class="fa fa-4x fa-signal"> </i> 
                <h4> test profiles</h4>
            </a>
            </div>
        <div class="tile tile-custom tile-purple col-xs-6 col-md-2">
            <a href="#">
                <h1> Opt 2</h1>
            </a>                
        </div>
        <div class="tile tile-custom tile-red col-xs-6 col-md-2">
            <a href="#">
                <h1> Opt 3</h1>
            </a>                
        </div>
      </div>
     </div>
    </div> 

$(".tile").on('click', function() {
  $(".tile").removeClass("activeTile");
  $(this).toggleClass("activeTile");
});

.tile:not(.activeTile):hover{background-color: #0047AB;}

是否可以通过在每个图块的右上角添加复选框来选择这些图块，当您点击图块上的任意位置时，复选框将被＆＃34;选中＆＃34;？任何帮助将不胜感激。

当前的jquery代码将鼠标悬停在每个磁贴上，从而导致磁贴背景颜色发生变化。我试图创建它的JS小提琴：但是，复选框没有出现，因为它不理解我的form.profiles变量。 https://jsfiddle.net/smq95e9t/

Answer 1

在检查你的jsfiddle后，我找不到在这里使用<label for>的方法。我最终得到了JavaScript解决方案。

这是我做的：

我已在click的任何一个磁贴上附加label.control.checkbox事件处理程序。
每当用户点击磁贴时，它都会点击<label>。

棘手的部分：当用户点击<label>或其子级时，它会触发两个功能。一个是我们的，瓦片click处理程序，另一个是metro-boostraps函数。

因此，当用户尝试通过单击<label>来选择磁贴时，它首先通过触发引导函数来检查它，然后通过触发我们的tile click处理程序来取消选中它。

这就是为什么只有在label.click()不包含srcElement类时才会触发checkbox的检查，而label类只出现在srcElement.className.indexOf('checkbox') === -1及其chlidren中。< / p>

checkbox

我希望它有所帮助，而且，你会在这些瓷砖中仔细使用(function() { var labelCheckboxes = document.querySelectorAll('.tile>label.control.checkbox'); for (var i = labelCheckboxes.length - 1; i >= 0; i--) { var tile = labelCheckboxes[i].parentElement; console.log(tile); tile.addEventListener('click', function(e) { var srcElement = e.target, label = tile.querySelector('label.control.checkbox'); // checks srcElement is not a label or label's elements as it might toggle back the value to its original value if (srcElement.className.indexOf('checkbox') === -1) { label.click(); } }, false); } })();类。：P

以下是摘录：

.tile:not(.activeTile):hover {
  background-color: #0047AB;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>

  <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

  <link rel="stylesheet" type="text/css" href="https://talkslab.github.io/metro-bootstrap/styles/font-awesome.min.css">

  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/metro-bootstrap/3.1.1.2/css/metro-bootstrap.css">

  <script type="text/javascript" src="https://cdn.jsdelivr.net/metro-bootstrap/3.1.1.2/css/metro-bootstrap.css.map"></script>

</head>

<body>


  <div class="well well-sm">
    <h2><font color="green">Features:</font></h2>
    <div class="grid">
      <div class="row col-md-12">
        <div class="tile tile-custom tile-turquoise col-xs-6 col-md-2">
          <label class="control checkbox">
            <input type="checkbox" id="same">
            <span class="checkbox-label"> CheckBox</span>
          </label>
          <a href="#" class="fa-links">
            <h1> Opt 1 </h1>
            <i class="fa fa-4x fa-signal"> </i> 
            <h4> test profiles</h4>
          </a>
        </div>
        <div class="tile tile-custom tile-purple col-xs-6 col-md-2">
          <a href="#">
            <h1> Opt 2</h1>
          </a>
        </div>
        <div class="tile tile-custom tile-red col-xs-6 col-md-2">
          <a href="#">
            <h1> Opt 3</h1>
          </a>
        </div>
      </div>
    </div>
  </div>


</body>

</html>

{{1}}

jquery - 如何通过单击磁贴来选中复选框

1 个答案: