Изменить другой стиль div на основе флажка check/uncheck

Question

Эта проблема слишком сильно меня раздражает, и я не могу избавиться от нее.

Я хочу изменить цвет фона DIV только тогда, когда посетитель проверяет первые два флажка формируют список 10.

HTML: 
      <div id="position_6"> 
       <div id="circle">     
        <p class="circle_text"> 

         #6      
        </p> 
       </div>    
      </div> 

<br/><br/> 

     <input type="checkbox" value="1" id="Checkbox1" name="Checkbox1"/> Answer one <br/> 
     <input type="checkbox" value="1" id="Checkbox2" name="Checkbox2"/> Answer two <br/> 
     <input type="checkbox" value="1" id="Checkbox3" name="a3"/> Answer three <br/> 
     <input type="checkbox" value="1" id="Checkbox4" name="a4"/> Answer four <br/> 
     <input type="checkbox" value="1" id="Checkbox5" name="a5"/> Answer five <br/> 
     <input type="checkbox" value="1" id="Checkbox6" name="a6"/> Answer six <br/> 
     <input type="checkbox" value="1" id="Checkbox7" name="a7"/> Answer seven <br/> 
     <input type="checkbox" value="1" id="Checkbox8" name="a8"/> Answer eight<br/> 
     <input type="checkbox" value="1" id="Checkbox9" name="a9"/> Answer nine <br/> 
     <input type="checkbox" value="1" id="Checkbox10" name="a10"/> Answer ten <br/> 

Все удачи на этом ??

До сих пор я пытался это ниже:

// JavaScript Document 

function bubbleColor() { 

    if($("#Checkbox1").is(":checked") && $("#Checkbox2").is(":checked"))/
    { 
     $("circle").css("text-decoration", "red"); 

    } 
} 
var el = document.getElementById("circle"); 
el.onclick = bubbleColor; 

Answer 1

Это должно сделать трюк:

$('#Checkbox1, #Checkbox2').on('change', function() { 

    if ($('#Checkbox1').is(':checked') && $('#Checkbox2').is(':checked')) { 
     $('#circle').css('background-color', '#999'); 
    } else { 
     $('#circle').css('background-color', 'transparent'); 
    } 
}); 

FIDDLE

Answer 2

Это непроверенное, но вы должны получить тэки. Добавьте событие изменения в оба флажка и добавьте класс в зависимости от того, проверено или нет, или напрямую измените css.

$(function(){ 
    $('#Checkbox1, #Checkbox2').change(function(){ 
     if($(this).is(':checked')) { 
     $('#DIVidHere').addClass('altBackground'); 
     //Or change css 
     //$('#DIVidHere').css('background-color','#000000'); 
     } else { 
     $('#DIVidHere').addClass('altBackground'); 
     //Or change css 
     //$('#DIVidHere').css('background-color','#FFFFFF'); 
     } 
    }); 
}); 

Обратите внимание - в настоящее время это не проверяет, что оба были проверены. Я предполагал, что это было то или другое?

Answer 3

Вы можете попробовать с селекторы атрибутов, как это:

$(function(){ 
    $('input[name^="Checkbox"]').on('click', function() { 
     if($(':checked').length >= 2){ 
      $('#circle').css('background-color','red'); 
     } 
    }); 
}); 

Это можно проверить только те флажки, чье имя начинается с Checkbox и если длина >= 2 то #circle ДИВ получит цвет фона red

You can take an idea from here

Answer 4

Не уверен, что вы делаете с событием onclick, поскольку вам нужно смотреть флажки, но я думаю, что y Возможно, вы захотите чего-то подобного.

$('#Checkbox1, #Checkbox2').change(function(){ 
    if($("#Checkbox1").is(":checked") && $("#Checkbox2").is(":checked"))/
    { 
     $("#circle").css("text-decoration", "red"); 
    } 
    }); 

В вашем примере у вас есть событие на кликах на div, а не на входах.

Answer 5

Использование:

<script type="text/javascript"> 
$("#Checkbox1, #Checkbox2").change(function(e) { 
    if($(this).attr('id')=="Checkbox1") { 
     $("#circle").removeClass("blue").addClass("red"); 
     $("#Checkbox2").prop('checked', false); 
    } else { 
     $("#circle").removeClass("red").addClass("blue"); 
     $("#Checkbox1").prop('checked', false); 
    } 
    if(!$("#Checkbox1").is(":checked") && !$("#Checkbox2").is(":checked")) 
     $("#circle").removeClass("red blue"); 
}); 
</script> 

<style> 
.red { background-color:red; } 
.blue { background-color:blue; } 
</style>