使用多个单选按钮和 JavaScript 更改 div 颜色答案

【问题标题】：Change div color using multiple radio buttons and JavaScript使用多个单选按钮和 JavaScript 更改 div 颜色
【发布时间】：2015-10-20 12:33:06
【问题描述】：

我正在尝试使用单选按钮来更改 div 标签的背景颜色。我想使用更多的条件。例如，如果单击按钮 A 并单击按钮 B，则将颜色设为绿色。这是我目前所拥有的。

<div id="CLWarn">Warning Colour </div>
<input type="radio" name="IM" id="IM" value="1" onclick="A(this)"/>
<input type="radio" name="PB" id="PB" value="1" onclick="B(this)"/>

function A(chk) {
if(chk.checked == true) {
function B(chk) {
if(chk.checked == true) {   
$(document).ready(function(){
document.getElementById("CLWarn").style.backgroundColor="Green";
document.getElementById("CLWarn").style.lineHeight=1.8;})
}}
}}

如果我只使用一个条件（只需单击一个按钮并且只有一个功能，但我不知道如何向我的功能添加另一个条件），它就可以工作。

【问题讨论】：

您在这里缺少大量的右括号。你确定这行得通吗？
两个 ID 相同的输入？
您确定需要单选按钮吗？只能选择一个同名的收音机。
我认为你需要检查按钮而不是 readio 按钮。
这是两组 4 个单选按钮，

标签： javascript html radio-button

【解决方案1】：

可能你尝试做这样的事情：

function A(chk) {
    if ( document.getElementById("IM1").checked && document.getElementById("IM2").checked ) {
        document.getElementById("CLWarn").style.backgroundColor="Green";
        document.getElementById("CLWarn").style.lineHeight=1.8;
    }
}

<div id="CLWarn">Warning Colour </div>
<input type="radio" name="IM1" id="IM1" value="1" onclick="A(this)"/>
<input type="radio" name="IM2" id="IM2" value="1" onclick="A(this)"/>

请注意，单选按钮有不同的names，以允许多选。根据一些好的做法，ids 也是独一无二的。

【讨论】：

完美。非常感谢你:-)

【解决方案2】：

虽然 jquery 没有被标记，因为 OP 在他的代码中使用了它，这里是一个 jquery 解决方案：

$('input').change(function() {
      if ($('#IM').is(':checked')) {
        if ($('#PB').is(':checked')) {
          alert('green');
        } else {
          alert('blue');
        } 
        } else {
          alert('red');
          }
        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="radio" name="IM" id="IM" value="1" />
<input type="radio" name="PB" id="PB" value="1" />

【讨论】：

【解决方案3】：

如前所述，您的单选按钮具有相同的“名称”值，这意味着一次只能检查一个。

如果我理解正确，您可以使用以下内容实现您想要的：

function changeColour(element) {
  var div = document.getElementById('CLWarn');
  if (element.id == 'a' && element.checked) {
    div.style.backgroundColor = 'green';
  } else if (element.id == 'b' && element.checked) {
    div.style.backgroundColor = 'red';
  }
}

<div id="CLWarn">Warning Colour</div>
<input type="radio" name="IM" id="a" value="1" onchange="changeColour(this)" />
<input type="radio" name="IM" id="b" value="1" onchange="changeColour(this)" />

【讨论】：

谢谢。是的，当我写关于名字的原始问题时，这是一个错误。我现在已经编辑了它。再次感谢您的回答。

【解决方案4】：

使用复选框代替单选：

<div id="CLWarn">Warning Colour </div>
<input type="checkbox" name="IM1" id="IM1" class="chk" />
<input type="checkbox" name="IM2" id="IM2" class="chk" />

并使用 jquery 来归档：

$(document).ready(function(){
   $(".chk").change(function(){
       var im1 = $("#IM1");
       var im2 = $("#IM1");

       if ($("#IM1").is(':checked') &&  $("#IM2").is(':checked')){
           $("#CLWarn").css("background-color", "green");
           $("#CLWarn").css("line-height", "1.8rem");
       }       
   })
})

Fiddle

此外，您可以将所有 css 放在一个单独的类中并使用 addClass 进行设置

 $("#CLWarn").addClass("myClass");

【讨论】：