Question

这个问题太烦我了，我无法摆脱它。

我想仅在访问者检查前两个复选框时才更改DIV的背景颜色。

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

这是未经测试的，但你应该得到一个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');
      }
   });
});

请注意 - 目前这不会检查两者是否都已经过检查。我推测它是一个或另一个？

Answer 3

您可以尝试使用以下属性选择器：

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

这只能检查名称以Checkbox开头的复选框，如果长度为>= 2，那么#circle div将获得red的背景色

You can take an idea from here

Answer 4

不知道你在onclick事件中做了什么，因为你需要看复选框，但我想你可能想要这样的事情。

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

根据复选框选中/取消选中另一个div样式

5 个答案: