html, CSS, JavaScriptを用いて、チェックボックスのオンオフによって画像をモノクロ・カラーを切り替えるようにしたいです。

Question

前提・実現したいこと

htmlでいくつかの画像をテーブル上に表示しています。
任意の画像のみユーザーが選択して、
選択されなかった画像はモノクロで表示されるようにしたいです。
選択には画像のすぐ下にチェックボックスを配置していますが、
可能ならば小さいチェックボックスだけではなく画像をクリックすることによってもオンオフを切り替えられれば嬉しいです。

発生している問題

チェックボタンによって画像を切り替えることは可能ですが、ひとつひとつjsでパスを指定している状況ですが、cssとjsを用いて自動でモノクロに変換してくれると有り難いです。

該当のソースコード

<td><img class="pho_img_mono" src="./img/test2.jpg" id="test1"><input type="checkbox" onClick ="sample('test1',this)">1</td>

function sample(imageID,checkbox) {
  var image = document.getElementById(imageID);
  if (checkbox.checked) {
  image.src = "./img/test1.jpg";
  } else {
  image.src = "./img/test2.jpg";
  }
}

.pho_img {
  width: 100%;
}
.pho_img_mono {
  width: 100%;
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
}

試したこと

jsで画像を切り替えるのではなく、画像のクラスを切り替えることはできないか試しましたが叶いませんでした。
当方htmlやCSS,JavaScriptの初心者ですので、どなたかご教授願えましたら助かります。

Comments

[plasticgrammer]

ライブラリを使うのはありですか？

[20200713]

初心者のため、可能な限りシンプルでわかりやすい記述だと嬉しいですが、
それが難しいようでしたらライブラリを使ったものでも大丈夫です。
ライブラリの利用の仕方についても併せてご説明お願いできましたら大変助かります…！

Answer 1

filter:grayscale(1)のようなCSSをかけることで、画像をモノクロに変換できます（MDN）。

Comments

[20200713]

お答えいただきありがとうございます。
チェックボックスがオフの場合のみモノクロにしたいのですが、ご提示いただいたようなフィルターはjsに追加で表記すれば良いのでしょうか…？

Answer 2

ちょっとだけ CSS の力業ですが…
おのおのの位置は自分で指定してください。

tr要素の子要素に form 要素は置けません。

<style>
.sampleTable td {
  position: relative;
}
td label {
  width: 60px; height: 120px;
  display: inline-block;
}
label input[type="checkbox"]:checked+img {
  filter: grayscale(0);
}
label img {
  width: 60px; height: 100px;
  border: 1px gray solid;
  position: absolute;
  top: 0; left: 0;
  filter: grayscale(1);
}
label img+span {
  position: absolute;
  right: 5px;
  bottom: 0;
}
label input[type="checkbox"] {
  position: absolute;
  bottom: 0;
}

</style>


<table class="sampleTable" border="1">
  <tr>
    <td>
      <label>
        <input type="checkbox" name="g_01">
        <img src="ICO_050.GIF" alt="ABC">
        <span>ABC</span>
      </label>
    <td>
      <label>
        <input type="checkbox" name="g_01">
        <img src="ICO_053.GIF" alt="DEF">
        <span>DEF</span>
      </label>
  <tr>
    <td colspan="2">
    <input type="button" value="全て選択" onclick="allChk(this)">
</table>
  
<script>
function allChk (e, checked = true) {
  Array.from (
    e.closest ('tr').previousElementSibling.querySelectorAll ('input[type="checkbox"]'),
    e=> e.checked = checked
  );
}
</script>

Comments

[20200713]

ご回答いただきありがとうございます！お陰様で無事問題解決いたしました！！

Answer 3

CSSだけでできそうですね。
まずは、以下のサイトの情報をご確認ください。

https://on-ze.com/archives/6409

Comments

[20200713]

お答えいただきありがとうございます。
当方まさにこちらのページを参照してCSSを記述しました。
.pho_img_monoというクラスを用意したところまでは良いのですが、
チェックボックスのオンオフによってクラスを変更するということができず困っている現状です。

[plasticgrammer]

記載されているsample関数のsrc属性を設定している箇所を、className属性の設定に変えてみてください。
（以下コードのクラス名は例です）

function sample(imageID,checkbox) {
var image = document.getElementById(imageID);
if (checkbox.checked) {
image.className = "pho_img_full";
} else {
image.className = "pho_img_mono";
}
}

[20200713]

お教えいただいたように記述して、理想的な挙動になりました！本当にありがとうございます。
実現したいこととして併せて記入しております「チェックボックスのオンオフ切り替えを、小さなチェックボックスのクリックだけでなく画像のクリックによっても行う」ようにすることは難しいでしょうか…？

[20200713]

また「全てのチェックボックスをチェックする」というボタンを押してもチェックのみが付き画像の色変更が行われないままでした…こちらも併せて、もしも可能でしたらお時間ある際にご教授願いたいのですが難しいでしょうか…！

【html】
<table class="sampleTable">
<tr>
<form name="form" method="GET">
<td><img class="pho_img" src="./img/test1.jpg" name="g_01" id="pho01"><input checked type="checkbox" name="g_01" onClick ="sample('pho01',this)"></td>
<td><img class="pho_img" src="./img/test2.jpg" name="g_01" id="pho02"><input checked type="checkbox" name="g_01" onClick ="sample('pho02',this)"></td>
</form>
</tr>
</table>
<input type="button" value="全て選択"onClick="allChecked(true);">

=====
【JavaScript】
function sample(imageID,checkbox) {
var image = document.getElementById(imageID);
if (checkbox.checked) {
image.className = "pho_img";
} else {
image.className = "pho_img_mono";
}
}

function allChecked(check){
for(count = 0; count < document.form1["g_01"].length; count++){
document.form1["g_01"][count].checked = check;
}
}

[plasticgrammer]

画像のクリックで切り替える場合、imgのonclickイベントにて自分に設定されているclassNameがAだったらBに、BだったらAにする処理を実装すればいけると思います。

[plasticgrammer]

全てチェックの別処理からの反映の場合、各チェックボックスのcheckedを設定した後で、clickイベントを呼び出してあげるのが楽そうです。

document.form1["g_01"][count].checked = check;
document.form1["g_01"][count].click();

[20200713]

お返事を参考に、無事解決いたしました！さらに手を加えていきたいと思います。
お陰様でhtmlやCSS,jsの使い方が少し理解できた気がします…！詳しく教えていただきありがとうございました！

Answer 4

チェックボックスが前でもよければcssだけでいけそうですけどね

<style>
.check:checked ~ img{
filter:grayscale(1)
}
</style>
<div>
<input type="checkbox" class="check">1
<img src="*.jpg">
</div>

Comments

[20200713]

ご回答いただきありがとうございます！お陰様で無事問題解決いたしました！！