HTML/JavaScript Когда флажок = True, измените <TD> цвет

Будучи вне программирования в течение нескольких лет, я пытаюсь понять, что, по моему мнению, будет относительно базовой формой HTML, и сталкивался с несколькими вещами, которые я больше не знаю, как это сделать ,HTML/JavaScript Когда флажок = True, измените <TD> цвет

Во-первых, у меня есть таблица 5x10 флажков. Всякий раз, когда проверяется какая-либо ячейка, я хотел бы, чтобы один и тот же код выполнялся, (если 4 флажка уже отмечены, выбросьте ошибку, в противном случае продолжите).

Как мне получить этот код для запуска всех флажков без необходимости добавлять «onclick» к каждой отдельной кнопке?

Во-вторых, если установлен флажок, я хотел бы изменить цвет фона элемента, в котором он содержится.

И, наконец, есть ли простой способ заменить изображение флажка с помощью пронумерованного шара или помеченной кнопки?

В соответствии с просьбой, мой код, до сих пор находится здесь: https://www.dropbox.com/s/mem6egamsojq18g/DrawTicket.html

источник

2013-07-02 NickSentowski

показать нам, что вы делали до сих пор. – mohkhan

Для цвета вы можете сделать это исключительно с помощью CSS3. Для первого бита я мог отвечать только с помощью jquery (javascript framework) (; –

Используйте http://jsfiddle.net/ для предоставления кода (и добавьте его также в строку). – ZenMaster

Ну, вот немного хакерская, чистая версия JS. Если вы начали хорошо ...

HTML:

<table id="table"> 
    <tr> 
     <td><input type="checkbox"/></td> 
     <td><input type="checkbox"/></td> 
    </tr> 
    <tr> 
     <td><input type="checkbox"/></td> 
     <td><input type="checkbox"/></td> 
    </tr> 
    <tr> 
     <td><input type="checkbox"/></td> 
     <td><input type="checkbox"/></td> 
    </tr> 
</table>

CSS, только для визуальной помощи:

td { 
    border: 1px solid #cccccc; 
} 

td.checked { 
    background: #ff0000; 
}

JS:

var handler = function(event) { 
    if(event.target.parentNode.className.indexOf('checked') < 0) { 
     event.target.parentNode.className += ' checked'; 
    } else { 
     event.target.parentNode.className = 
       event.target.parentNode.className.replace(' checked', ''); 
    } 
}; 

var table = document.getElementById('table'); 
table.addEventListener('click', handler);

И JSFiddle играть.

P.S.

Что касается замены его изображения - есть много решений в Интернете, большинство из них не являются кросс-браузер - смотрите здесь: How to style checkbox using CSS?

источник

2013-07-02 02:45:05 ZenMaster

Я думаю, что простой способ использует JQuery так: В головной части (или как последний элемент в теле)

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
<script type="text/javascript"> 
    $(function(){ 
    $('input:checkbox').click(function(){ 
     if ($(this).is(':checked')) { 
     $(this).parent().css('background-color', 'green'); 
     } else { 
     $(this).parent().css('background-color', 'white'); 
     } 
    }); 
    }); 
</script>

Я думаю, хорошее решение для третьего вопроса

источник

2013-07-02 02:41:21 Aguardientico

HTML/JavaScript Когда флажок = True, измените <TD> цвет

ответ

Смежные вопросы