-5

这个问题困扰着我太多，我无法摆脱它。

我只想在访问者选中前两个复选框形成 10 个列表时更改 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;
4

5 回答 5

1

这应该可以解决问题：

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

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

小提琴

于 2013-09-24T13:20:19.170 回答
0

这是未经测试的，但你应该得到 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-24T13:08:43.320 回答
0

您可以尝试使用这样的属性选择器：

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

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

你可以从这里得到一个想法

于 2013-09-24T13:14:43.097 回答
0

不确定您在使用 onclick 事件做什么，因为您需要查看复选框，但我认为您可能想要这样的东西。

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

在您的示例中，您有点击 div 而不是输入的事件。

于 2013-09-24T13:16:10.277 回答
0

采用：

<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-24T13:41:19.903 回答