根据复选框选中/取消选中更改另一个 div 样式 [关闭]答案

【问题标题】：Change another div style based on the check box check/uncheck [closed]根据复选框选中/取消选中更改另一个 div 样式 [关闭]
【发布时间】：2013-09-29 17:08:51
【问题描述】：

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

我只想在访问者选中前两个复选框形成 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;

【问题讨论】：

前两个或两者中的任何一个？
尝试了某种 JS，但没有成功
这似乎与您之前的问题之一非常相似。那是颜色，这是背景颜色。我想你可以弄清楚逻辑。
应该是$("#circle") 而不是$("circle")。您必须使用# 选择一个以id 为圆圈的元素。如果您只使用circle，它将检查元素tag name 作为圆圈。
现在，想知道您的页面上有多少#circle 元素？至少你的点击事件被触发了吗？

标签： javascript jquery html css dom

【解决方案1】：

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

请注意 - 目前这不检查是否都已检查。我以为是其中之一？

【讨论】：

两者都应该检查

【解决方案2】：

你可以试试这样的属性选择器：

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

【讨论】：

【解决方案3】：

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

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

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

【讨论】：

【解决方案4】：

这应该可以解决问题：

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

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

FIDDLE

【讨论】：

非常感谢！！！！！！！！！！！！！！！这就是我想要的！

【解决方案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>

【讨论】：