Javascript 根据用户改变手风琴面板的颜色'；s输入

我有一个手风琴小部件，用于翻转问题，请参见中的

我想手风琴改变颜色，如果用户选择特定的单选按钮。用户可以提供四个选项作为答案：是（Y）、否（N）、不可见（NS）和不适用（NA）。 具体来说，如果用户选择Y、NS或NA，则颜色变为“绿色”；如果N-颜色变为“红色”。如果未选择（默认状态）-无任何更改

下面是手风琴内容的HTML代码

<div id="Q412">
  <table class="QTable">
  <tr>
  <td width="45"  align="left" valign="top" scope="row"><div class="QNumber">4.12</div></td>
  <td width="100%"  align="left" valign="top">
  <div class="QText">Text of the question</div>
  </td>
  </tr>
  </table>
</div>

<div>
  <table class="RTable">
  <tr>
  <td width="100%"  align="left" valign="top" style="padding-right:20px">
   <div class="Guidance"><p>Content of the guidance</p>
   </div>
   </td>

    <td width="550" align="left" valign="baseline">
    <div class="Response">
      <label><input type="radio" name="Radio412" value="Y" id="Radio_412Y" onchange='radioChange(this, "412")'>Yes</label>
            <label><input type="radio" name="Radio412" value="N" id="Radio_412N" onChange='radioChange(this, "412")'>No</label>
            <label><input type="radio" name="Radio412" value="NS" id="Radio_412NS" onChange='radioChange(this, "412")'>Not Seen</label>
            <label><input type="radio" name="Radio412" value="NA" id="Radio_412NA" onChange='radioChange(this, "412")'>Not Applicable</label>
     </div>

     <div id="responseDetails">
     <div class="Observation">
        <label for="observation">Observation:</label>
        <textarea name="observation" id="Obs412" rows="6" disabled style="width: 530px;" placeholder="Enter text of observation here ..."></textarea>
     </div>
     <div id="DueDate">
            <label for="DueDate">Due date:<br></label>
            <input name="DueDate" class="DueDate" type="date" id="DueDate412"/>
        </div>
        <div class="actions">
            <label for="actions">Actions required to correct and/or prevent this observation:</label>
            <textarea name="actions" id="pa412" rows="6" style="width: 530px;"></textarea>
        </div>
        </div>
        </td>
        </tr>
    </table>
    </div>

我知道它必须是一个相对简单的JS代码来激活这个功能，但。。。

---

提前谢谢你

您可以使用jQuery轻松地向元素添加类

获取半径元素并添加更改事件。大约：

 $('input[type=radio][name=NameOfRadioInput]').change(function(){
 if (this.value == 'BLAH') {
        $(#YourAccordionElement).addClass("className1").
    }
    else if (this.value == 'BLEH') {
        $(#YourAccordionElement).addClass("className2").
    }

  }

---

您可以使用jQuery轻松地将类添加到元素中

获取半径元素并添加更改事件。大约：

 $('input[type=radio][name=NameOfRadioInput]').change(function(){
 if (this.value == 'BLAH') {
        $(#YourAccordionElement).addClass("className1").
    }
    else if (this.value == 'BLEH') {
        $(#YourAccordionElement).addClass("className2").
    }

  }

---

向.css文件添加类，如

.classGreen { 
color: green 
} 

.classRed { 
color: red 
}

然后重新填充js代码：

if (this.value == 'Y') {
        $(.questions).addClass("classGreen");
}
else if (this.value == 'N') {
        $(.questions).addClass("classRed");
}

---

然后，当你想用removeClass（“classGreen”）/等删除那些绿色/红色时，你必须删除添加的样式类。。。或者使用toggleClass（“classGreen”）而不是addClass/removeClass将类添加到.css文件中，如

.classGreen { 
color: green 
} 

.classRed { 
color: red 
}

然后重新填充js代码：

if (this.value == 'Y') {
        $(.questions).addClass("classGreen");
}
else if (this.value == 'N') {
        $(.questions).addClass("classRed");
}

---

然后，当你想用removeClass（“classGreen”）/等删除那些绿色/红色时，你必须删除添加的样式类。。。或者使用toggleClass（“classGreen”）而不是addClass/removeClass

哦，谢谢您的及时回复。有趣的是，我以前就有过这个想法，问题是——由于我的JS知识“初学者”水平，我不知道如何正确地应用它。我已将您的建议转换为

$（'input[type=radio][name=Radio401]'）。更改（function（）{if（this.value='Y'）{$（.questions）.addClass（“className1”）；}否则if（this.value='N'）{$（.questions）.addClass（“className2”）；}

然而，对于问题401，我不知道如何申请课程。更重要的是，我有大约400个问题，每个问题都有自己的id（Radio+id）…或者我们可以用问题401做一个例子，让我理解整个事情，谢谢你的及时回复。有趣的是，我以前有过这个想法，问题是-我不知道如何正确应用它，因为我的JS知识水平是“初学者”。我已经将你的建议转换为

$（'input[type=radio]对于问题401，change（function（）{if（this.value='Y'）{$（.questions.addClass（“className1”）；}或者if（this.value='N'）{$（.questions.addClass（“className2”）；}

对于问题401，我不确定如何应用类。更重要的是，我有大约400个问题，每个问题都有自己的id（Radio+id）…或者我们可以用问题401做一个例子，让我明白整个事情，请明白。但是，手风琴面板的背景颜色由以下行控制：

.ui-state-default、.ui-widget-content.ui-state-default、.ui-widget-header.ui-state-default{border:1px solid#d3d3；background:#e6e6；font-weight:normal；color:#555}

。如果我添加类classGreen，“它将如何与小部件的现有css交互？没有问题，css类中有层次结构，颜色被覆盖而没有“Esstructural”"问题是，但如果我只是在ui.widget-header等下放置额外的类，并将其包含到JS中，它不会工作。忘记ui.widget-header，将这些新类包含在您自己的css文件中，这就是我所做的。classGreen是如何应用到accordion头的-这是我不理解的。我的意思是上面的JS只说添加这个类-但是什么回复到？好的，这很清楚。但是，手风琴面板的背景颜色由以下行控制：

.ui状态默认值，.ui小部件内容.ui状态默认值，.ui小部件标题.ui状态默认值{边框：1px solid#d3d3d3；背景：#e6e6；字体重量：normal；颜色：#555}

。如果我添加类green它将如何与小部件的现有css交互？没有问题，css类中有层次结构，颜色被覆盖而没有“Esstructural”问题是，但如果我只是在ui.widget-header等下放置额外的类，并将其包含到JS中，它不会工作。忘记ui.widget-header，将这些新类包含在您自己的css文件中，这就是我所做的。classGreen是如何应用到accordion头的-这是我不理解的。我的意思是上面的JS只说添加这个类-但是什么你要去哪里？