Смена картинки по нажатию на чебокс
подскажите пожалуйста как сделать так чтобы при клике на checkbox менялась картинка, нашел на форуме как по менять чебокс по нажатию на картинку но не как не могу сделать наоборот.
<body> <script> function chg(id,chk){ var el = document.getElementById(id); var ch = document.getElementById(chk); if (el.src.indexOf("images/moto4.jpg")>0){ el.src="images/moto2.jpg" ch.checked="true"; }else{ el.src="images/moto4.jpg" ch.checked=""; } } </script> <img src="images/moto4.jpg" id="img_1" onClick="chg(this.id,'check')"><br> <input type="checkbox" name="check" id="check"> </body> |
Как вариант...
<script>
function Go() {
document.getElementById('scr').src=(document.getElementById('typ').checked)? 'http://javascript.ru/forum/images/smilies/laugh.gif': 'http://javascript.ru/forum/images/smilies/blink.gif'
}
</script>
<img src="http://javascript.ru/forum/images/smilies/blink.gif" id="scr" /><br />
<input type="checkbox" name="check" id="typ" onclick="Go()" />
|
Спасибо огромное!!! класс мне еще учиться и учиться
|
скажите пожалуйста если уж не сильно вас напрягу
а как передать два параметра чтобы допустим при нажатии на checkbox появлялась картинка и при этом переслаивалось значении допустим 500 мне для калькулятора |
Цитата:
|
смотрите я нажимаю на чебокс у меня если он включен его значения ровно 500 если выключен ровно 0 и
|
arahmanov, для этого ничего никуда передавать не нужно
<script>
function Go() {
var n=(document.getElementById('typ').checked)? 500: 0
alert(n)
}
</script>
<input type="checkbox" name="check" id="typ" onclick="Go()" />
|
но при этом должны меняться и картинки :)
|
Заходи еще... :)
|
<script>
function Go() {
document.getElementById('scr').src=(document.getElementById('typ').checked)? 'http://javascript.ru/forum/images/smilies/laugh.gif': 'http://javascript.ru/forum/images/smilies/blink.gif'
var n=(document.getElementById('typ').checked)? 500: 0
alert(n)
}
</script>
<img src="http://javascript.ru/forum/images/smilies/blink.gif" id="scr" /><br />
<input type="checkbox" name="check" id="typ" onclick="Go()" />
|
просто слов нет выручил !!!!!!
|
слушай прости за наглость я просто мало шарю в jquery и javascript привык к php. если ответишь буду благодарен ( я и изначально хотел написать все на php только картинки менять на jquery. но раз ты мне так помог может еще чуть чуть и я буду готов все написать ...
в php я передаю параметр методом POST <form name="form1" method="post" action=""> <label> <input type="text" name="comp" id="comp"> <br> </label> количество компов </form> <?php $comp = $_POST["comp"]; $c= $comp * 1200; echo "$c"; ?> как это организовать jquery или javascript |
простите за столько вопросов
|
Прощу прощения за наглость я просто лол в jquery и javascript привык все на php делать. буду благодарен если поможете реализовать на jquery. суть в чем передаю параметр методом POST
<form name="form1" method="post" action=""> <label> <input type="text" name="comp" id="comp"> <br> </label> количество компов </form> <?php $comp = $_POST["comp"]; $c=$comp * 1200; echo "$comp" ?> |
Вот по моему то что тебе надо, вводи цифры в поле и увидишь:
<form>
<label>
<input type="text" name="comp" id="comp" onkeyup="document.getElementById('result').innerHTML = this.value*1200;">
<br>
</label>
</form>
<div id="result"></div>
|
Цитата:
дело в том что у меня если один комп то 1200 если 2 = 2100 3 = 3000 4= 3900 5 = 4800 6= 5500 7= 6200 8=6900 9=7600 10=8300 11=8900 12=9500 13=10100 14=10700 15=11300 16=1900 17=12500 18=13100 19=13700 20=14300 21=14900 с 21 * 600 я не прошу делать все за меня вы просто объясните если не сложно как прописать допустим я в php пишу else if ( $n == 1) { $n= 1200} else if ($n == 2) {$n = 2100 } else if ($n>21) {$n = #n* 600 } |
Ну вот пример:
<script type="text/javascript">
function go(){
var num = document.getElementById('num').value,
int = document.getElementById('comp').value,
result = document.getElementById('result');
result.innerHTML = int * (num > 21 ? 600 : 1200)
}
</script>
<form>
<label>
Число <input type="text" value="1" name="comp" id="comp">
Кол-во <input type="text" value="1" id="num">
<input type="button" value="*" onclick="go();"/>
<br>
</label>
</form>
<div id="result"></div>
|
не много не так на php вот так вот
<?php $comp = $_POST["comp"]; if($comp == 1) { $comp = 1200;} else if ($comp == 2) { $comp = 2100;} else if ($comp == 3) { $comp = 3000;} else if ($comp == 4) { $comp = 3900;} else if ($comp == 5) { $comp = 4800;} else if ($comp == 6) { $comp = 5000;} else if ($comp == 7) { $comp = 6200;} else if ($comp == 8) { $comp = 6900;} else if ($comp == 9) { $comp = 7600;} else if ($comp == 10) { $comp = 8300;} else if ($comp == 11) { $comp = 8900;} else if ($comp == 12) { $comp = 9500;} else if ($comp == 13) { $comp = 10100;} else if ($comp == 14) { $comp = 10700;} else if ($comp == 15) { $comp = 11300;} else if ($comp == 16) { $comp = 11900;} else if ($comp == 17) { $comp = 12500;} else if ($comp == 18) { $comp = 13100;} else if ($comp == 19) { $comp = 13700;} else if ($comp == 20) { $comp = 14300;} else if ($comp == 21) { $comp = 14900;} else if ($comp > 21) { $comp = $comp * 600;} echo "$comp " ?> |
ааа, вон что, тогда в js будет так:
<script type="text/javascript">
function go(){
var int = document.getElementById('comp').value,
result = document.getElementById('result');
if(int == 1) int = 1200;
else if (int == 2) int = 2100;
//и так далее по схеме
result.innerHTML = int;
}
</script>
<form>
<label>
Число <input type="text" value="1" name="comp" id="comp">
<input type="button" value="*" onclick="go();"/>
<br>
</label>
</form>
<div id="result"></div>
Только советую найти закономерность в перемножении чисел чтобы не писать вариант для каждого числа. |
спасибо, на счет закономерности ее нет до 21 числа а после все умножаем на 600, последний вопрос, если вы меня не кастрируете ...
на хочу совместить два параметра <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> <title>Документ без названия</title> </head> <script type="text/javascript"> function go(){ var int = document.getElementById('comp').value, result = document.getElementById('result'); if(int == 1) int = 1200; else if (int == 2) int = 2100; else if (int == 3) int = 3000; else if (int == 4) int = 3900; else if (int == 5) int = 4800; else if (int == 6) int = 5500; else if (int == 7) int = 6200; else if (int == 8) int = 6900; else if (int == 9) int = 6700; else if (int == 10) int = 8300; else if (int == 11) int = 8900; else if (int == 12) int = 9500; else if (int == 13) int = 10100; else if (int == 14) int = 10700; else if (int == 15) int = 11300; else if (int == 16) int = 11900; else if (int == 17) int = 12500; else if (int == 18) int = 18300; else if (int == 19) int = 13700; else if (int == 20) int = 14300; else if (int == 21) int = 14900; else if (int > 21) int = int * 600; function GO() { document.getElementById('scr').src=(document.getEl ementById('typ').checked)? 'images/moto2.jpg': 'images/moto4.jpg' var n=(document.getElementById('typ').checked)? 500: 0 } result.innerHTML = int + n; } </script> <form> <label> <input type="checkbox" name="check" id="typ" onClick="GO()" /> Число <input type="text" value="1" name="comp" id="comp"> <input type="button" value="*" onclick="go();"/> <br> </label> </form> <div id="result"></div> <body> </body> </html> |
Объясните что именно хотите, по действиям, например при нажатии на тото будет такое действие, а на другое такое.
|
Цитата:
http://javascript.ru/switch
switch (int) {
case 1:
int = 1200
break
case 2:
int = 2100
break
case 3:
int = 3000
break
// так продолжить до 21
default:
int = int * 600
}
Или вариант с массивом
var data=[1200, 2100, 3000] // и так все 21-но значение
if (int < 22) {
int = data[int-1]
} else {
int = int * 600
}
Все посимпотнее будет смотреться... :) |
По действиям у меня две переменные одна передается
function go(){ var int = document.getElementById('comp').value, result = document.getElementById('result'); if(int == 1) int = 1200; с этим я кое как разобрался, а вторая переменная <script> function Go() { document.getElementById('scr').src=(document.getEl ementById('typ').checked)? 'images/moto2.jpg': 'images/moto4.jpg' var n=(document.getElementById('typ').checked)? 500: 0 document.getElementById('result').innerHTML = this.value; } </script> <div id="result"></div> но тут возникает вопрос у функций одно имя Go и как в этом случае быть как сделать чтобы оба скрипта работали и при этом я бы еще хотел их сложить :))) |
Цитата:
<script>
function Go() {
// тут первая часть
// тут вторая часть
// тут чего-то там сложить
}
</script>
|
Спасибо огромное всем!!! очень мне сильно помогли!!!...
|
подскажите пожалуйста,
<script type="text/javascript"> function showMe (box) { var vis = (box.checked) ? "block" : "none"; document.getElementById('div1').style.display = vis; } </script> <input type="checkbox" name="multi_note" value="1" onClick="showMe(this)"> Firewall <div id="div1" style="display:block; display:none;"> <select id="firewall"> <option value="select">Выберите тип...</option> <option value="200">Аппаратное устройсво</option> <option value="700">Програмное решение</option> </select> </div> так сделав выбор я хочу также добавить функцию go, причем картнки уже показывается не от положения чебокса а от выбора селекта) так вот вопрос как записать эту функция. / я понимаю (кажется как она должна выглядеть но записать правильно не могу ) находим элемент с id function Go() { document.getElementById('firewall') потом наверное надо как то спросить какое у нее значение 200 или 700 и взаимозависимости от этого вывести картинку при этом поместив значения в переменные. и наконец последний вопрос ( с чего начать чтобы понимать структуры записи в jquery и javascript ) не могу же я все время спрашивать :))))) посоветуйте книжку или видео урок может чей .... |
Цитата:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
</style>
<script>
function Go() {
var o=document.getElementById('firewall')
alert(o.value)
}
</script>
</head>
<body>
<select id="firewall" onchange='Go()'>
<option value="select">Выберите тип...</option>
<option value="200">Аппаратное устройсво</option>
<option value="700">Програмное решение</option>
</select>
</body>
</html>
|
Цитата:
|
:)) ржу не могу. сегодня же займусь.
внедрил ваш скрипт правда не много пришлось поковырять чтобы передать значения а то у меня не выдавало не число а слово не 200 а "200" но с этим разобрался. самостоятельно . когда я отмечаю чебокс у меня выпадает список в списке три значения допустим я выбираю один из них а потом выключаю чебокс но значение то у меня осталось, как его сбросить при выключенном чебоксе, я кину как думаю а вы подкорректируйте если не сложно, Спасибо var gop = o.value if (gop == "200") {gop=200} else if (gop == "700") {gop=700} else if (gop == "0") {gop=0}; var fire=(document.getElementById('firewall').checked) ? gop: 0 так вот можно ??? наверное нельзя потому что неработает result.innerHTML = int + n + k + fire; <select id="firewall" onchange='Go()'> <option value="0">Выберите тип...</option> <option value='200'>Аппаратное устройсво</option> <option value='700'>Програмное решение</option> </select> |
Цитата:
- либо вешать одинаковую функцию на события всех участвующих полей - либо делать кнопку типа "Расчитать" и все действия выполнять по её нажатию. |
Цитата:
|
Цитата:
|
спасибо огромное теперь понял
|
СПАСИБОООО ВСЕ ПОЛУЧИЛОСЬ :)))))))))))))
|
Цитата:
var p=(document.getElementById('firewall').checked)? gop: 0
Оно? |
Цитата:
подскажите а как вывести картинку в зависимость от переменной if (gop = 700) {'images/moto2.jpg'} else if (gop = 200) {'images/moto4.jpg'}; |
Цитата:
|
Цитата:
|
Если элемент уже существует, тогда так
if (gop = 700) {val='images/moto2.jpg'}
else if (gop = 200) {val='images/moto4.jpg'};
document.getElementById('My_Img').src=val
|
Цитата:
|
| Часовой пояс GMT +3, время: 02:28. |