ラジオボタンが同じ行で選択されているときに表のセルのフォント色を変更します

複数の行を持つHTML表があります。各行には、第1列に質問（テキスト）があり、第2列、第3列、および第4列にそれぞれはい、いいえ、または該当なしと答える3つのラジオボタンがあります。ラジオボタンが同じ行で選択されているときに表のセルのフォント色を変更します

同じ行のいずれかのラジオボタンがチェックされているときに、最初の列のテキストのフォント色を変更したいと考えています。

ここでStackoverflowの他の質問は、ラジオボタンが配置されているセルの背景色を変更することですが、この場合は同じ行の最初の列の属性を変更する必要があります。

PS：あなたはthis JSBin fiddleで一緒にプレイするダミーのコードを見つけることができます。

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width"> 
    <title>JS Bin</title> 
</head> 
<body> 
    <table border=1> 
    <tr> 
     <th>Question</th> 
     <th>Yes</th> 
     <th>No</th> 
     <th>N/A</th> 
    </tr> 
    <tr> 
     <td>Are you a student?</td> 
     <td><input type="radio" name="student"></td> 
     <td><input type="radio" name="student"></td> 
     <td><input type="radio" name="student"></td> 
    </tr> 
    </table> 
</body> 
</html>

任意のヒントや提案は歓迎以上になります。前もって感謝します！

出典

2017-02-15 gacanepa

文書にjQueryがロードされていますか？ – Mojtaba

@Mojtaba - はい、あります。私はそれをJSBinのフィドルに追加するのを忘れてしまった。 – gacanepa

イベントリスナーを設定できます。

必要に応じて、選択した値を取得して値に基づいて色を設定することもできます。

$("input[name='student']").change(function(){ 
 
    console.log($(this).val()); 
 
    $(this).closest('tr').children('td').first().css('color', '#455434'); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<table border=1> 
 
    <tr> 
 
     <th>Question</th> 
 
     <th>Yes</th> 
 
     <th>No</th> 
 
     <th>N/A</th> 
 
    </tr> 
 
    <tr> 
 
     <td>Are you a student?</td> 
 
     <td><input value="1" type="radio" name="student"></td> 
 
     <td><input value="2" type="radio" name="student"></td> 
 
     <td><input value="3" type="radio" name="student"></td> 
 
    </tr> 
 
    </table>

出典

2017-02-15 15:46:08 Mojtaba

ありがとう！これは私が探していたものでした！ – gacanepa

@gacanepa、問題ありません。 'console.log'行を削除することができます。私はちょうど選択した値を取得する方法を示すためにそれを追加しました – Mojtaba

$(document).ready(function() { 
    $('input[type=radio][name=student]').change(function() { 
     $("td:first-child").css("color", "red"); 
    }); 
});

ラジオボタンが選択されていると、最初のtdセルのフォントカラーの質問が変わる可能性があります。

チェックしたチェックボックスをチェックしてフォントの色を変更する条件文を追加すると、選択されていない場合はテキストが赤くなり、「はい」の場合は緑色に変わる可能性があります。

出典

2017-02-15 15:46:08

ありがとうございます！私は両方の答えを選ぶことができたらいいと思う。 – gacanepa

あなたがクリックされた行の最初の列を見つけるために、DOMをトラバースし、選択したラジオに基づいて色を変化させることができます。

ここにはFiddle Demoがあります。

$('input:radio').on('click', function() { 
    //clear any existing background colors in the first column 
    $('table tr td:first-child').css('background','transparent'); 
    //find the index of the column that contains the clicked radio 
    var col = $(this).closest('td').index(); 
    //find the first td in that row 
    var firstTd = $(this).closest('tr').find('td:first-child'); 
    //set the color based on the column index of the clicked radio 
    var color; 
    switch (col) { 
    case 1: 
     color = 'red'; 
     break; 
    case 2: 
     color = 'green'; 
     break; 
    case 3: 
     color = 'purple'; 
     break; 
    } 
firstTd.css('background', color); 
});

出典

2017-02-15 15:50:12

ありがとう！これは本当に素晴らしい答えです！ – gacanepa

ラジオボタンが同じ行で選択されているときに表のセルのフォント色を変更します

答えて

関連する問題