мой 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/>
Желаемый результат:
Когда кто-то проверяет [выбирает] флажок и флажок2, фон # 6 должен быть красного цвета.
Проблема:
Код, похоже, не работает.
Любая помощь, пожалуйста?
Я предполагаю, что вы используете jquery (поскольку вы меняете css с jquery)
Поведение, которое вы описываете в своем вопросе, подразумевает, что изменение флажка должно инициировать проверку, так почему вы присоединяете функцию bubbleColor к нажатию на div.bubble?
Попробуйте что-то вроде этого:
// Alternatively you could use a class to select the checkboxes
$("input[type='checkbox']").change(bubbleColor);
Разумеется, вы должны изменить свою функцию, чтобы удалить красный цвет, если вы снимите флажки:
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/
Edit: Если вы хотите, чтобы пользователь выбирал только один вариант, вы должны использовать радиокнопки вместо флажков, так как это поведение по умолчанию:
<input type="radio" name="inputname" value="1"/>
<input type="radio" name="inputname" value="2"/>
<input type="radio" name="inputname" value="3"/>
Имя должно быть одинаковым для входов, но каждый из них будет иметь другое значение, при этом один из них автоматически отменит выбор другого.
Попробуйте этот код
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");
}
});
});
Проблема в
var el = document.getElementById(".bubble");
Вы выбираете элемент с идентификатором.bubble (пузырь - это класс)
Измените его и проверьте:
var el = document.getElementById("circle");
Заменить var el = document.getElementById(". Bubble"); el.onclick = bubbleColor;
с
$ (". bubble"). click (bubbleColor);
должно сработать.
Прежде всего, вы присоединяете обработчик событий для события click на div с классом "bubble". Затем вы используете метод document.getElementById для выбора элемента, но вы используете в качестве аргумента класс этого элемента, а не идентификатор.
Для этого вам нужно прикрепить обработчик события клика к элементам флажка. Что-то вроде этого:
$('input[type="checkbox"]').click(function() {
bubbleColor();
});