checkbox решаем что делать
Привет всем. Что то я облазил поисковики и не нашел нормальной инфы.
У меня вопрос в следующем. Хотелось б все сделать на JS без Query. Есть <input type="checkbox" class="fl_select" iid="'.$row["id"].'" '.$fl_select.'/> Необходимо при клике определить стоит ли галочка или нет Это для того чтобы решить какой запрос выполнить. Пример кликнули по checkbox если стоит галочка высветилось сообщение стоит , если нет то сообщить что нет. И при сообщении сменить checkbox. Если он был включен то выключить потом , если выключен то включить. |
Цитата:
|
Цитата:
|
Цитата:
|
pornoborets,
:-?
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="checkbox" class="fl_select" id="row1" checked="checked" />
<input type="checkbox" class="fl_select" id="row2" />
<script>
[].forEach.call(document.getElementsByClassName('fl_select'), function(e) {
e.onclick = function() {
alert('Было ' + (!this.checked ? 'вкл' : 'выкл'));
alert('Стало ' + (this.checked ? 'вкл' : 'выкл'));
}
})
</script>
</body>
</html>
|
С onchange аналогично...
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<!--
<script src='http://code.jquery.com/jquery-latest.js'></script>
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
<link rel='stylesheet type=text/css href=tmp.css' />
<link rel="stylesheet/less" type="text/css" href="style.less">
<script src="http://cdnjs.cloudflare.com/ajax/libs/less.js/2.5.0/less.min.js"></script>
-->
<style type='text/css'>
</style>
<script type='text/javascript'>
</script>
</head>
<body>
<input type="checkbox" class="fl_select" id="row1" checked="checked" />
<input type="checkbox" class="fl_select" id="row2" />
<script>
[].forEach.call(document.getElementsByClassName('fl_select'), function(e) {
e.onchange = function() {
alert('Было ' + (!this.checked ? 'вкл' : 'выкл'));
alert('Стало ' + (this.checked ? 'вкл' : 'выкл'));
}
})
</script>
</body>
</html>
|
Endy,
То есть, Вы инвертируете, как-бы, значения. Но ведь, ТС'у надо было именно узнать значение поля до изменения. Получается, такого способа нет? И, остается вопрос, насколько Ваш метод надежен, в плане кроссбраузерности, и так далее. Ведь это, фактически, грязный хак, причем, извращенный, к тому же. |
ksa,
Спасибо, капитан. |
pornoborets,
Цитата:
Цитата:
Цитата:
|
Цитата:
|
Цитата:
|
Цитата:
|
привет. надеюсь я не нарушая правила, создавая тут свой вопрос. столкнулся с проблемой: есть вопрос, на который только два варианта ответа правильных. Если указываешь один правильный, другой неправильный пишет неверно! как и должен, но стоит мне отметить checkbox, который правильный и тогда пишет верно! но один checkbox из трех неверно отмечен, а все равно пишет верно! не подскажете, где ошибка?
вот код
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="style2.css">
<title>Вопросы</title>
<script type="text/javascript">
var correct = 0;
function kontroll3(){
var vastus=document.getElementsByName("v3"); //по имени радиокнопки name="#"
if(vastus[1].checked && vastus[5].checked){ // вписывает индекс ответа, счет с 0
document.getElementById("otvet3").innerHTML="верно";
document.getElementById("otvet3").style.color="green";
correct++;
}
else{
document.getElementById("otvet3").innerHTML="неверно";
document.getElementById("otvet3").style.color="red";
}
};
</script>
</head>
<body>
<form action="#">Что не включается в математическую модель коммуникации?
<br>
<input type="checkbox" name="v3" value="v19"> <!--value - значение, которое будет отправлено на сервер-->
источник информации
<br>
<input type="checkbox" name="v3" value="v20">
передатчик
<br>
<input type="checkbox" name="v3" value="v21">
ответчик
<br>
<input type="checkbox" name="v3" value="v22">
канал связи
<br>
<input type="checkbox" name="v3" value="v22a">
приемник
<br>
<input type="checkbox" name="v3" value="v22b">
кондуктор
<br>
<input type="checkbox" name="v3" value="v22c">
место назначения
<br>
<input type="button" value="check" onClick="kontroll3();">
<div id="otvet3"> Ответ </div>
<br>
<a href="#">Помощь</a>
</form>
<br>
<br>
</body>
</html>
|
придётся вам в условие и все остальные checkbox добавить && !vastus[0].checked ...
можно ещё тут помедитировать http://javascript.ru/forum/misc/5324...tml#post353762 |
да, я тоже так решил делать, но их что-то много ситуаций тогда писать надо.. а никак покороче не сделать чтоли, ну например если ТОЛЬКО 0 и 5 отмечены?
|
Lecseus,
если интересуют все -- все и нужно обходить либо циклом что в примере выше, либо в условии перечислять все как у вас сейчас. |
жесть. неужели в JS нельзя прописать только когда 1 и 3 чекбоксы, никак иначе..
циклом попробую конечно, но неужто нету вариантов? |
Цитата:
|
скажите пожалуйста, реально ли использовать в JavaScript метод switch case с чекбоксами, ну например, если там 1 и 3 отмечены: такое-то действие; если 1 и 2 и 3 отмечены:такое-то?
вообще насколько это реально? |
Цитата:
|
function kontroll(){
var vastus=document.getElementsByName("v1"); //по имени радиокнопки name="#"
if(vastus[0].checked && vastus[1].checked && vastus[3].checked){ // вписывает индекс ответа, счет с 0
document.getElementById("otvet1").innerHTML="верно";
document.getElementById("otvet1").style.color="green";
correct++;
}
if(vastus[0].checked && vastus[1].checked && vastus[2].checked && vastus[3].checked){
document.getElementById("otvet1").innerHTML="неверно";
document.getElementById("otvet1").style.color="red";
}
if(vastus[0].checked && !vastus[1].checked && !vastus[2].checked && !vastus[3].checked){
document.getElementById("otvet1").innerHTML="неверно";
document.getElementById("otvet1").style.color="red";
}
if(!vastus[0].checked && vastus[1].checked && !vastus[2].checked && !vastus[3].checked){
document.getElementById("otvet1").innerHTML="неверно";
document.getElementById("otvet1").style.color="red";
}
if(!vastus[0].checked && !vastus[1].checked && !vastus[2].checked && vastus[3].checked){
document.getElementById("otvet1").innerHTML="неверно";
document.getElementById("otvet1").style.color="red";
}
if(vastus[0].checked && vastus[1].checked && !vastus[3].checked){
document.getElementById("otvet1").innerHTML="неверно";
document.getElementById("otvet1").style.color="red";
}
if(vastus[0].checked && vastus[3].checked && !vastus[1].checked && !vastus[2].checked){
document.getElementById("otvet1").innerHTML="неверно";
document.getElementById("otvet1").style.color="red";
}
if(vastus[1].checked && vastus[3].checked && !vastus[0].checked){
document.getElementById("otvet1").innerHTML="неверно";
document.getElementById("otvet1").style.color="red";
}
if(!vastus[0].checked && !vastus[1].checked && !vastus[2].checked && !vastus[3].checked){
document.getElementById("otvet1").innerHTML="неверно";
document.getElementById("otvet1").style.color="red";
}
};
допустим |
Lecseus,
макет это когда можно жмакнуть и увидеть или не увидеть результат
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<body>
<input type="checkbox" name="v1">
<input type="checkbox" name="v1">
<input type="checkbox" name="v1">
<input type="checkbox" name="v1">
<input name="" type="button" value="проверить" onclick="kontroll()">
<p id="otvet1"></p>
<script> var correct = 0;
function kontroll() {
var otv = document.getElementById("otvet1"),
vastus = document.getElementsByName("v1"),
answer = [1, 1, 0, 1];
answer = answer.every(function(check, i) {
return check == vastus[i].checked
})
otv.innerHTML = answer ? "верно" : "неверно";
otv.style.color = answer ? "green" : "red";
answer && correct++;
};
</script>
</body>
</html>
|
Цитата:
Все это запросто меняется на
function kontroll(){
var vastus=document.getElementsByName("v1"); //по имени радиокнопки name="#"
if(vastus[0].checked && vastus[1].checked && vastus[3].checked){ // вписывает индекс ответа, счет с 0
document.getElementById("otvet1").innerHTML="верно";
document.getElementById("otvet1").style.color="green";
correct++;
return;
};
document.getElementById("otvet1").innerHTML="неверно";
document.getElementById("otvet1").style.color="red";
};
|
Цитата:
|
рони, чего я там пропустил? :blink:
|
Цитата:
Цитата:
|
рони, в любом случае у него правильная комбинация только одна.
Делать столько проверок на "неправильность" нет смысла... :) |
Цитата:
|
рони, я просто переделал его последний пример... :D
На само условие не смотрел. :no: |
мне у вас, рони, даже не хочется копировать.. ибо я не понимаю кода. но со switch case никак совсем?
да и спасибо большое, буду разбираться. |
рони, не могли бы мне объяснить, каким образом тут массив связывается:
answer = [1, 1, 0, 1]; тут
answer = answer.every(function(check, i) {
return check == vastus[i].checked
})
если я правильно понимаю, вложенная функция, которая возвращает выбор. Но откуда тут every, это такая встроенная функция какая-то? Можете прокомментировать ваш код? и отчего у вас запятые вместо ";"?как я это понял: задается массив, который потом проверяется и значение отмеченной коробки сверяется с индексом в массиве и только при таком раскладе выдает "верно", так? но я все-таки не понимаю, каким образом переменной, которая как массив передается далее функция и все остальное, не понимаю.. otv.innerHTML = answer ? "верно" : "неверно";- это просто краткая запись условия if, если true то берется то, что до двоеточия, правильно я понимаю? не понимаю, что значит answer && correct++; и ещё, объясните, как делать макет, чтобы в следующий раз не ошибиться? |
Цитата:
[HTML run][/HTML] о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting. |
|
Цитата:
|
рони,
спасибо. изучаю |
про запятые понял.
и все-таки про то, что написано answer И correct++; не понял. correct++ понимаю, но при чем тут стоит answer. про every понял, только что значит return check == vastus[0].checked; ну так, туманно понимаю.. тоесть в заданный параметр в скобках функции check приравнивается действие о клике на checkbox. так? |
Lecseus,
было answer = [1, 1, 0, 1]; крекс фекс пекс answer = answer.every(function(check, i) { return check == vastus[i].checked }) стало скажем answer = true (или false) answer && correct++; перевод с этрусского if(answer == true)correct++; перевод на русский если ответ правильный плюсуем единичку :) если иначе то нефига не делаем |
Lecseus,
check(любое имя) это перечисляемый элемент массива 1 или 0 тут [1, 1, 0, 1]; каждый элемент массива сравнивается с соотвествующим состоянием чекбокса |
Цитата:
|
Цитата:
|
| Часовой пояс GMT +3, время: 17:58. |