jquery - タイルをクリックしてチェックボックスをチェックする方法

メトロブートストラップタイルをいくつか作成して、Webアプリケーションのさまざまなチェックボックスオプションを表しました。jquery - タイルをクリックしてチェックボックスをチェックする方法

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

それはあなたがしてタイルの任意の場所をクリックすると、各タイルの右上にあるチェックボックスを追加することにより、これらのタイルができる選択させるとすることは可能です：コードのHTML/JS部分の下に見つけてください。チェックボックスを「オン」にしますか？どんな助けもありがとう。

現在のjqueryコードは、各タイルの上にマウスを置くとタイルの背景色が変更されます。私はそれのJSフィドルを作成しようとしました：しかし、私のform.profiles変数を理解していないので、チェックボックスは表示されません。 https://jsfiddle.net/smq95e9t/

出典

2016-11-21 Hamid K

可能な複製（http://stackoverflow.com/questions/426258：Pここ

はスニペットです[jQueryを使ってチェックボックスのための "確認" の設定します？]/j-check-for-checkbox-with-jquery） – Leith

@Hamidタイルの場合、 ''を使用してチェックボックスを選択できます。 – sam

@sam、このJS Fiddle https://jsfiddle.net/smq95e9t/1/を使って詳細を教えてください –

jsfiddleを確認した後、<label for>を使用する方法が見つかりませんでした。私はJavaScriptソリューションで終わった。ここで

は私がやったことです：

私はlabel.control.checkboxを持っている方のタイル上clickイベントハンドラを添付しています。
ユーザーがタイルをクリックするたびに、<label>をクリックします。

トリッキーな部分：ユーザーが<label>またはその子をクリックすると、それは2つの機能をトリガします。 1つは私達のもので、タイルはclickハンドラです。もう1つはメトロブーストラップ機能です。

<label>をクリックしてタイルを選択しようとすると、最初にブートストラップ機能を起動してから、タイルclickを起動してチェックを外していました。

srcElementはlabelとそのchlidrenにのみ存在するcheckboxクラスは、含まれていない場合にのみlabel.click()をトリガーするためのチェックがある理由です。

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

は、私はまた、それは、あなたがそのようなタイルの内側に慎重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); 
 
    } 
 

 
})();

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

出典

2016-11-22 18:00:41 sam

jquery - タイルをクリックしてチェックボックスをチェックする方法

答えて

関連する問題