jquery - How to check a check box by clicking on a tile

Question

I have created some metro-bootstrap tiles to represent different checkbox options for my web application. Please find below the HTML/JS portion of the code:

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

Is it possible to make these tiles select able by adding a check box on top-right of each tile and when you click anywhere on the tile then the checkbox be "checked"? Any help would be appreciated.

The current jquery code will cause a change in a tile background color by hovering the mouse over each tile. I tried to create the JS Fiddle of it: however, the check box does not appear since it does not understand my form.profiles variable. https://jsfiddle.net/smq95e9t/

Possible duplicate of [Setting "checked" for a checkbox with jQuery?](http://stackoverflow.com/questions/426258/setting-checked-for-a-checkbox-with-jquery) — Leith, Nov 21 '16 at 20:34
@sam, can you elaborate more using this JS Fiddle https://jsfiddle.net/smq95e9t/1/ — Hamid K, Nov 22 '16 at 16:02

score 3 · Accepted Answer · answered Nov 22 '16 at 18:00

After checking your jsfiddle, I couldn't find a way to use <label for> here. I ended up with JavaScript solution.

Here is what I did:

I have attached a click event handler on a tile whichever has a label.control.checkbox.
Whenever user clicks on the tile, it will click on <label>.

Tricky part: When user clicks on <label> or its children, it trigger two functions. One is ours, tile click handler, and another one is metro-boostraps function.

Because of this, when user tries selecting the tile by clicking on <label>, it was first checking it by triggering bootstrap function and then unchecking it by triggering our tile click handler.

That's why there is a check to trigger label.click() only if the srcElement does not contain the checkboxclass, which is only present in label and its chlidren.

srcElement.className.indexOf('checkbox') === -1

I hope it help and, also that, you would use checkbox class carefully inside such tiles. :p

Here is the snippet:

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

})();

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

jquery - How to check a check box by clicking on a tile

1 Answers1