Q&A
前提
label要素もしくはチェックボックスがクリックされた際に、
チェックボックスに対になっているlabel要素の背景色を、
灰色に変更するコードについてです。
「label.css('background','');」の部分は、
一度label要素の背景色を初期化しているということでしょうか。
よろしくお願い致します。
該当のソースコード
jQuery
1$(function() { 2 const chkBox = $('label, input[type="checkbox"]'); 3 const label = $('label'); 4 5 chkBox 6 .on('click', function() { 7 label 8 .css('background',''); 9 $(':checked') 10 .each(function() { 11 $(`label[for='${$(this).attr("id")}']`) 12 .css('background', '#ccc'); 13 }); 14 }); 15});
HTML5
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <title></title> 6</head> 7<body> 8 スキル: 9 <input type="checkbox" name="html" value="HTML" id="html"> 10 <label for="html">HTML</label> 11 <input type="checkbox" name="css" value="CSS" id="css"> 12 <label for="css">CSS</label> 13 <input type="checkbox" name="javascript" 14 value="JavaScript" id="javascript"> 15 <label for="javascript">JavaScript</label> 16 <input type="checkbox" name="php" value="PHP" id="php"> 17 <label for="php">PHP</label> 18<script src="js/jquery-3.6.0.min.js"></script> 19<script src="js/app.js"></script> 20</body> 21</html>
回答1件
1
ベストアンサー
インラインstyleの backgroundプロパティを削除しています。
一度すべてのラベルの backgroundプロパティを削除してから、
ループでチェックのあるチェックボックスの背景色をグレーに設定してますね。
えらく遠回りな処理だなという印象です。
チェックボックスのchangeイベントを使えば、ループさせる必要はないですね。
JavaScript/JQuery
1$(function() { 2 $('input[type=checkbox]').on("change",function() { 3 $(`label[for='${$(this).attr("id")}']`) 4 .css('background',$(this).prop('checked')?'#ccc':''); 5 }); 6});
投稿2022/08/18 13:29
編集2022/08/18 13:39
総合スコア33102
あなたの回答
tips
プレビュー
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
また依頼した内容が修正された場合は、修正依頼を取り消すようにしましょう。
2022/08/18 13:54
2022/08/19 00:31
2022/08/19 08:59