2016-11-01 30 views
1

実際のチェックボックスを非表示にしてクリック可能なラベルに置き換えたチェックボックス入力の表を作成しようとしています。そのため、クリック時に表のセルの背景色を変更する必要があります。 (理想的には、チェックボックスの状態に直接結びついていますが、私はそれを理解できませんでした)JavaScript:クリック時に背景色を変更する(トグルクラス)

私のコードがうまくいかない理由はわかりません。

HTML:

<table id="workingSetTable" border="1"> 
<tr> 
<td onclick="togglechecked()" class="checked"> 
    <div> 
    <input type="checkbox" checked="checked" /> 
    </div> 
</td> 
</tr> 

はCSS:

input { 
    display: none; 
} 

td { 
    background-color: red; 
    width: 100px; 
    height: 100px; 
} 

.checked { 
    background-color: blue; 
} 

JS:JSフィドルで

$(togglechecked() { 
    $("td").click(togglechecked() { 
     $(this).toggleClass("checked"); 
    }); 
}); 

Fiddle

+0

){'行うことになって?オンとオフクラス "にチェックを" トグル(青から赤に背景色を切り替え – j08691

+0

) –

+0

。あなたは 'function toggleChecked(){...'や '$( '#workingSetTable td')...のようなイベントハンドラのように呼び出す関数にしたいと思うかもしれません。 – j08691

答えて

1

それがロードされた波平ので、あなたはjQueryのを選択しませんでした、とw ouldntはあなたが何をしても働いています。

必要以上の構文もあります。クリックハンドラを追加するには、htmlに何も必要ありません。名前付き関数は必要ありません。

https://jsfiddle.net/w45antdo/

これは(あなたが別のページにフォームデータとしてこれを提出していない限り、実行する必要がいけない脇のボタンをチェックすることから、)あなたが必要とするすべてのjqueryのです

$("td").click(function() { 
     $(this).toggleClass("checked"); 
}); 

の場合HTMLは通常

$(document).ready(function() { 
    console.log("ready!"); 
}); 
1

を行うことによって、行われた後、これはjsfiddle以外の場所で、あなたもここでは、迅速かつ汚いですjqueryのをロードするためにそれを教えてください例 - 私はタイムシート調整のためのオン/オフシフトを作成するためにこれを使用します(BITにはより多くの鐘と笛があります)。これは、チェックボックスのことをして、データベースを更新した背景PHPスクリプト、などなど

$('.shifts_clickable td').on('click',function() { 
 
\t \t \t \t \t \t \t if ($(this).hasClass('registered_active')) { 
 
\t \t \t \t \t \t \t \t $(this).removeClass('registered_active').addClass('not_active'); 
 
\t \t \t \t \t \t \t } else { 
 
\t \t \t \t \t \t \t \t $(this).removeClass('not_active').addClass('registered_active'); 
 
\t \t \t \t \t \t \t } 
 
\t \t \t \t \t \t })
table { 
 
    border-collapse: initial; 
 
    border-spacing: 0; 
 
    margin: 1em auto; 
 
    width: 98%; 
 
} 
 
thead, th { 
 
\t background: $header-background; 
 
\t color: $header-color; 
 
\t text-align: center; 
 
\t font-family: 'open_sans_semibold'; 
 
\t font-size: 1em; 
 
} 
 
td { 
 
\t border: 0.1em solid #9a9a9a; 
 
\t color: $hilight-contrast; 
 
\t font-size: 0.9em; 
 
} 
 
.registered_active { 
 
\t background-color: green; 
 
} 
 
.not_active { 
 
\t background-color: rgb(220,160,50); 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<li> 
 
\t \t \t \t \t \t \t \t <table> 
 
\t \t \t \t \t \t \t \t \t <thead> 
 
\t \t \t \t \t \t \t \t \t \t <tr> 
 
\t \t \t \t \t \t \t \t \t \t \t <th></th><th>Monday</th><th>Tuesday</th><th>Wednesday</th><th>Thursday</th><th>Friday</th><th>Saturday</th></tr> 
 
\t \t \t \t \t \t \t \t \t </thead> 
 
\t \t \t \t \t \t \t \t \t <tbody><tr class="shifts_clickable"> 
 
\t \t \t \t \t \t \t \t \t \t \t <td class="shift_1_0_heading center"><b>Shift 0</b></td><td id="bar_1__1__0__1" class=" pointer not_active"></td><td id="bar_1__1__0__2" class=" pointer not_active"></td><td id="bar_1__1__0__3" class=" pointer not_active"></td><td id="bar_1__1__0__4" class=" pointer not_active"></td><td id="bar_1__1__0__5" class=" pointer not_active"></td><td id="bar_1__1__0__6" class=" pointer not_active"></td></tr><tr class="shifts_clickable"> 
 
\t \t \t \t \t \t \t \t \t \t \t <td class="shift_1_1_heading center"><b>Shift 1</b></td><td id="bar_1__1__1__1" class=" pointer not_active"></td><td id="bar_1__1__1__2" class=" pointer not_active"></td><td id="bar_1__1__1__3" class=" pointer not_active"></td><td id="bar_1__1__1__4" class=" pointer not_active"></td><td id="bar_1__1__1__5" class=" pointer not_active"></td><td id="bar_1__1__1__6" class=" pointer not_active"></td></tr><tr class="shifts_clickable"> 
 
\t \t \t \t \t \t \t \t \t \t \t <td class="shift_1_2_heading center"><b>Shift 2</b></td><td id="bar_1__1__2__1" class=" pointer not_active"></td><td id="bar_1__1__2__2" class=" pointer not_active"></td><td id="bar_1__1__2__3" class=" pointer not_active"></td><td id="bar_1__1__2__4" class=" pointer not_active"></td><td id="bar_1__1__2__5" class=" pointer not_active"></td><td id="bar_1__1__2__6" class=" pointer not_active"></td></tr><tr class="shifts_clickable"> 
 
\t \t \t \t \t \t \t \t \t \t \t <td class="shift_1_3_heading center"><b>Shift 3</b></td><td id="bar_1__1__3__1" class=" pointer not_active"></td><td id="bar_1__1__3__2" class=" pointer not_active"></td><td id="bar_1__1__3__3" class=" pointer not_active"></td><td id="bar_1__1__3__4" class=" pointer not_active"></td><td id="bar_1__1__3__5" class=" pointer not_active"></td><td id="bar_1__1__3__6" class=" pointer not_active"></td></tr><tr class="shifts_clickable"> 
 
\t \t \t \t \t \t \t \t \t \t \t <td class="shift_1_4_heading center"><b>Shift 4</b></td><td id="bar_1__1__4__1" class=" pointer not_active"></td><td id="bar_1__1__4__2" class=" pointer not_active"></td><td id="bar_1__1__4__3" class=" pointer not_active"></td><td id="bar_1__1__4__4" class=" pointer not_active"></td><td id="bar_1__1__4__5" class=" pointer not_active"></td><td id="bar_1__1__4__6" class=" pointer not_active"></td></tr><tr class="shifts_clickable"> 
 
\t \t \t \t \t \t \t \t \t \t \t <td class="shift_1_5_heading center"><b>Shift 5</b></td><td id="bar_1__1__5__1" class=" pointer not_active"></td><td id="bar_1__1__5__2" class=" pointer not_active"></td><td id="bar_1__1__5__3" class=" pointer not_active"></td><td id="bar_1__1__5__4" class=" pointer not_active"></td><td id="bar_1__1__5__5" class=" pointer not_active"></td><td id="bar_1__1__5__6" class=" pointer not_active"></td></tr><tr class="shifts_clickable"> 
 
\t \t \t \t \t \t \t \t \t \t \t <td class="shift_1_6_heading center"><b>Shift 6</b></td><td id="bar_1__1__6__1" class=" pointer not_active"></td><td id="bar_1__1__6__2" class=" pointer not_active"></td><td id="bar_1__1__6__3" class=" pointer not_active"></td><td id="bar_1__1__6__4" class=" pointer not_active"></td><td id="bar_1__1__6__5" class=" pointer not_active"></td><td id="bar_1__1__6__6" class=" pointer not_active"></td></tr></tbody> 
 
\t \t \t \t \t \t \t \t </table> 
 
\t \t \t \t \t \t \t \t <label for="checkallshifts_1" class="button secondary_button center">Check all shifts for Bar 1</label><input id="checkallshifts_1" name="checkallshifts_1" class="button secondary_button ui-corner-all" type="checkbox"> 
 
\t \t \t \t \t \t \t \t </li>

0

https://jsbin.com/teyoziwini/edit?html,css,js,output

にデータを送信し、上記フィドル使用を行う方法を示していますラベルと非表示のチェックボックスがあります。 一部のブラウザ(Safari)が表示されないフォームコントロールを送信しないため、display:none;の代わりにvisiblity:hidden;を使用しています。

HTML

<table id="workingSetTable" border="1"> 
    <tbody> 
     <tr> 
     <td > 
      <label class="checked"> 
      <input type="checkbox" checked="checked" /> 
      </label> 
     </td> 
     </tr> 
    </tbody> 
    </table> 

CSS

.checked { 
    background-color: blue; 
} 

td label { 
    display: inline-block; 
    position: relative; 
    background-color: red; 
    width: 100px; 
    height: 100px; 
} 

td label.checked { 
    background-color: blue; 
} 

td label input { 
    visibility: hidden; 
    position: absolute; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height:100%;  
} 

jQueryの

$(document).on('change', 'label input', function(){ 
    var $this = $(this); 
    $this.closest('label').toggleClass('checked', $this.prop('checked')); 
}); 
+0

これはまさに私が探していたものです。どうもありがとうございます。 –

0

私は本当にあなたが望むものを理解していません。

は、しかし、私はここではjavascriptをせずに完全な例です。このフィドルhttps://jsfiddle.net/avialle/zykc6gz9/6/

$(function() { 
 
    $('input').click(function (evt) { 
 
    $(evt.target).parent().toggleClass('checked'); 
 
    }); 
 
});
table { 
 
    border-collapse: collapse; 
 
    border-spacing: 0; 
 
} 
 
td { 
 
    border:1px solid black; 
 
    padding:20px; 
 
    background-color:white; 
 
} 
 
td.checked { 
 
    background-color:blue; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
    <td class="checked"><input type="checkbox" checked=""></td> 
 
    <td><input type="checkbox"></td> 
 
    </tr> 
 
    <tr> 
 
    <td><input type="checkbox"></td> 
 
    <td class="checked"><input type="checkbox" checked=""></td> 
 
    </tr> 
 
</table>

0

を思い付きます。正しくない構文です

togglechecked `$((何

table td { 
 
    border: 1px solid black; 
 
    min-width: 5em; 
 
} 
 
table input[type=checkbox] { 
 
    display: none; 
 
} 
 
label { 
 
    width: 100%; 
 
    height: 100%; 
 
    display: block; 
 
} 
 
input[type=checkbox]:checked + label { 
 
    background: green; 
 
} 
 
<table> 
 
    <tr> 
 
    <td><input name="input_1_1" id="input_1_1" type="checkbox"><label for="input_1_1">&nbsp;</label></td> 
 
    <td><input name="input_1_2" id="input_1_2" type="checkbox"><label for="input_1_2">&nbsp;</label></td> 
 
    <td><input name="input_1_3" id="input_1_3" type="checkbox"><label for="input_1_3">&nbsp;</label></td> 
 
    </tr> 
 
</table>

関連する問題