根據複選框更改另一個div樣式選中/取消選中

-5

此問題對我有太大的影響，我無法擺脫它。根據複選框更改另一個div樣式選中/取消選中

我想只有當訪客檢查前兩個複選框來改變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;

來源

2013-09-24 Mohammad Khalid Masud

任何前兩個或兩個人的？ – DannyThunder

嘗試了一些JS，沒有運氣 –

這看起來和你以前的一個問題隊友非常相似。這是爲了顏色，這是背景顏色。我想你可以制定出邏輯。 – Harry

這應該做的伎倆：

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

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

FIDDLE

來源

2013-09-24 13:20:19

非常感謝你!!!!!!!!!!!!!!這是我想要的！ –

這是未經測試，但你應該得到的JIST。將更改事件添加到兩個複選框，並根據是否選中或添加一個類或直接更改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'); 
     } 
    }); 
});

請注意 - 目前這不會檢查這兩個已檢查。我推測它是一個或另一個？

來源

2013-09-24 13:08:43

兩者都應該檢查 –

你可以用屬性選擇這樣的嘗試：

$(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

來源

2013-09-24 13:14:43 Jai

不知道你在做什麼onclick事件，因爲你需要看着複選框，但我想y你可能想要這樣的事情。

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

在你的例子中，你有事件點擊div而不是輸入。

來源

2013-09-24 13:16:10 Mark

用途：

<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>

來源

2013-09-24 13:41:19 Salim

根據複選框更改另一個div樣式選中/取消選中

回答

相關問題