CSS不通过HTML调用JS改变

我的JS代码波纹管：CSS不通过HTML调用JS改变

// JavaScript Document 

function bubbleColor() { 

    if($("#Checkbox1").is(":checked") && $("#Checkbox2").is(":checked")) 
    { 
     $(".bubble").css("background-color", "red"); 

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

而我的目标HTML：

 <div id="circle" class="bubble"> 
        <p class="circle_text"> 

         #6 

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

所需的输出：

当有人检查[选择] Checkbox1和Checkbox2，＃6背景都应该是红色。

问题：

该代码似乎不起作用。

请帮忙吗？

来源

2013-09-24 Mohammad Khalid Masud

问题是在

var el = document.getElementById(".bubble");

您与.bubble的ID选择元件（气泡一类）

它更改为，并检查：

var el = document.getElementById("circle");

来源

2013-09-24 10:21:59

感谢您的帮助，但不幸的是，这是不工作:( –

是其工作正常。当您更改.bubble按照建议循环，然后检查2个第一复选框，背景变为红色。 – Gatekeeper

林假设你是使用jQuery（因为你正在改变与jQuery的css）

你在你的que描述的行为这意味着更改复选框应该会触发验证，那么为什么要附加bubbleColor函数来点击.bubble div？

尝试这样：

// Alternatively you could use a class to select the checkboxes 
$("input[type='checkbox']").change(bubbleColor);

Ofcourse理想情况下，你应该改变你的函数，如果你清除复选框，以移除红色：

function bubbleColor() { 
    if ($("#Checkbox1").is(":checked") && $("#Checkbox2").is(":checked")) { 
    $(".bubble").css("background-color", "red"); 
    } else { 
    $(".bubble").css("background-color", "transparent"); 
    } 
}

小提琴：http://jsfiddle.net/sQCcF/2/

编辑：如果你想要确保用户只选择1选项，那么你应该使用单选按钮，而不是复选框，因为这是默认行为：

<input type="radio" name="inputname" value="1"/> 
<input type="radio" name="inputname" value="2"/> 
<input type="radio" name="inputname" value="3"/>

名称必须是用于输入相同，但每一个将有一个不同的值，选择一个将自动取消选择另一个。

来源

2013-09-24 10:27:41 cernunnos

可缩写为[[fiddle]（http://jsfiddle.net/venkateshwar/sQCcF/3/）... :) –

感谢您的帮助！基本上，这不是用于验证目的。它提醒用户的某种警报。实际上有10个复选框，我必须确定是否选择了前2个，那么气泡背景应该是红色。 –

我建议使用具有相同名称的单选按钮，否则使用此建议编辑答案 – cernunnos

首先，您为div上的click事件附加了一个类“bubble”的事件处理函数。然后，您使用document.getElementById方法来选择一个元素，但您将该元素的类作为参数使用，而不是该ID。

为此，您需要将click事件处理程序附加到复选框元素。像这样：

$('input[type="checkbox"]').click(function() { 
    bubbleColor(); 
});

来源

2013-09-24 10:27:47

替换变种EL =的document.getElementById（ “泡沫”。）; el.onclick = bubbleColor;

与

$（“。bubble”）。点击（bubbleColor）;

应该工作。

来源

2013-09-24 10:31:29 Riad

不工作:(对不起 –

试试这个代码

HTML

<div id="circle" class="bubble"> 
<p class="circle_text"> 
    #6 
</p> 
</div> 
<br/><br/> 
<input type="checkbox" value="1" id="Checkbox1" name="Checkbox1" class="chBox"/> Answer one <br/> 
<input type="checkbox" value="1" id="Checkbox2" name="Checkbox2" class="chBox" /> Answer two <br/> 
<input type="checkbox" value="1" id="Checkbox3" name="a3" class="chBox" /> Answer three <br/>

JQUERY

$(document).ready(function(){ 
    // you can use '.chBox class or input[type='checkbox']' 
    $('.chBox').bind('click', function(){ 
     if($("#Checkbox1").is(":checked") && $("#Checkbox2").is(":checked")) 
     { 
      $(".bubble").css("background-color", "red"); 
     }else{ 
      $(".bubble").css("background-color", "#fff"); 
     }  
    }); 
});

来源

2013-09-24 10:59:30 Hari

CSS不通过HTML调用JS改变

回答

相关问题