Изменить цвет div с помощью нескольких переключателей и JavaScript

Question

Я пытаюсь использовать переключатели для изменения цвета фона моего тега 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;}) 
}} 
}} 

Это работает, если я только с помощью одного условия (просто нажав одну кнопку и имеющий только одну функцию, но я не знаю, как добавить еще одно условие для моей функции.

Answer 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)"/>

Обратите внимание, что существуют различные name с для переключателей, допускающих множественный выбор. И id s также уникальны в соответствии с некоторыми хорошими практиками.

Answer 2

Как уже упоминалось, ваши переключатели имеют одно и то же значение «Имя», что означает, что только один может быть проверен одновременно.

Если я правильно понимаю, вы можете добиться того, что вы хотите использовать что-то вроде следующего:

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)" />

Answer 3

Хотя 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" />

Answer 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

Addictionally вы можете PUY все ваши CSS в отдельный класс и установить с addClass

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