Присвоить значение для Checkbox

sm1603 · November 24, 2009

есть такой калькулятор)

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title></title>
<style type="text/css">
<!--
body {
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
}
div {
color:#CCCCCC;
font-size:11px;
font-family:Georgia, "Times New Roman", Times, serif;
}
a:hover, a{
color:#CCCCCC;
text-decoration: none;
}
.fild {
width: 30px;
text-align: right;
font-size: 11px;
margin-right: 10px;
}
-->
</style>
<script type="text/javascript">
function calc() {

a1 = parseInt(document.getElementById('cn1').value);
a2 = parseInt(document.getElementById('cn2').value);
a3 = parseInt(document.getElementById('cn3').value);
a4 = parseInt(document.getElementById('cn4').value);
a5 = parseInt(document.getElementById('cn5').value);
a6 = parseInt(document.getElementById('cn6').value);
for (i=1;i<=8;i++) {
if (a1==i) {document.getElementById('cn4').value=8*i};
if (a2==i) {document.getElementById('cn5').value=8*i};
if (a3==i) {document.getElementById('cn6').value=8*i};

}

total = a1 * 6000 + a2 * 8000 + a3 * 12000 + a4 * 2240 + a5 * 2520 + a6 * 2800; 
document.getElementById('totalprice').innerHTML = total;
document.getElementById('totpr').value = total;
}


function show_form (){
document.getElementById('tf1').style.display = "block"; 

}

</script>
</head>

<body>
<center>
<br />
<form name="form" action="sendmail.php" method="post">
<table width="350" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="3" align="center"><strong>Категория 1</strong></td>
</tr>
<tr>
<td> </td>
<td align="left"><label>
<input class="fild" name="cn1" type="text" id="cn1" value="0" maxlength="8" onKeyUp="calc()"/>
</label>
Товар 1</td>
<td>- 6000</td>
</tr>
<tr>
<td> </td>
<td align="left"><input class="fild" name="cn2" type="text" id="cn2" value="0" maxlength="8" onKeyUp="calc()"/>
Товар 2</td>
<td>- 8000</td>
</tr>
<tr>
<td> </td>
<td align="left"><input class="fild" name="cn3" type="text" id="cn3" value="0" maxlength="8" onKeyUp="calc()"/>
Товар 3</td>
<td>- 12000</td>
</tr>
<tr>
<td colspan="3" align="center"><strong>Категория 2</strong></td>
</tr>
<tr>
<td> </td>
<td align="left"><input class="fild" name="cn4" type="text" id="cn4" value="0" maxlength="8" onKeyUp="calc()"/>
Товар 1</td>
<td>- 2240</td>
</tr>
<tr>
<td> </td>
<td align="left"><input class="fild" name="cn5" type="text" id="cn5" value="0" maxlength="8" onKeyUp="calc()"/>
Товар 2</td>
<td>- 2520</td>
</tr>
<tr>
<td> </td>
<td align="left"><input class="fild" name="cn6" type="text" id="cn6" value="0" maxlength="8" onKeyUp="calc()"/>
Товар 3</td>
<td>- 2800</td>
</tr>
<tr>
<td> </td>
<td align="center"><input name="Button" type="button" value="заказать" onClick="show_form ()"/>	 <b>Итого:<input type="hidden" name="totpr" value="" id="totpr" /></b></td>
<td align="center" id="totalprice" style="color: #993300;font-weight:bold; font-size:14px">0</td>
</tr>
</table>
<table width="350" border="0" cellspacing="0" cellpadding="0" style="display:none" id="tf1">
<tr>
<td colspan="2" align="left">   <b>Заказ услуг</b></td>
</tr>
<tr>
<td width="90" align="left">ФИО *</td>
<td width="260" align="left"><input type="text" value="" name="name" style="width:95%;"/></td>
</tr>
<tr>
<td align="left">Телефон </td>
<td align="left"><input type="text" value="" name="telefon" style="width:95%;"/></td>
</tr>
<tr>
<td align="left">E-Mail *</td>
<td align="left"><input type="text" value="" name="email" style="width:95%;"/></td>
</tr>
<tr>
<td align="left">Компания *</td>
<td align="left"><input type="text" value="" name="company" style="width:95%;"/></td>
</tr>
<tr>
<td align="left">Должность *</td>
<td align="left"><input type="text" value="" name="dolg" style="width:95%;"/></td>
</tr>
<tr>
<td align="left">Ваши пожелания</td>
<td align="left"><textarea name="gelanie" style="WIDTH:95%; HEIGHT:70px"></textarea></td>
</tr>
<tr>
<td align="left"> </td>
<td align="left"><input type="hidden" name="zakaz" value="" id="c3"/>
</td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" value="отправить заказ" /></td>
</tr>
</table>
</form>
</center>

</body>
</html>

как сделать чтобы вместо поля ввода поставить галочку, котоая бы приравнивалась к вводу единицы? А при снятии возвращала значение в 0?

пробовал так:

<tr>
<td> </td>
<td align="left"><label>
<input class="fild" name="cn1" type="Checkbox" id="cn1" value="1" maxlength="8" checked="calc()"/>
</label>
Товар 1</td>
<td>- 6000</td>
</tr>

Он просто считает всю сумму=((

И как сделать чтобы значение товара 1 второй категории появлялась не в поле ввода, а просто в таблице, в качестве числа, без возможности редактирования?

Edited November 24, 2009 by sm1603

Dimitry Wolotko · November 24, 2009

Уберите из кода всё лишнее, что не является обязательным для решения задачи. Я не буду ломать глаза выискивая необходимые строки.

sm1603 · November 24, 2009

Уберите из кода всё лишнее, что не является обязательным для решения задачи. Я не буду ломать глаза выискивая необходимые строки.

вот строка в таблице

<tr>
<td colspan="3" align="center"><strong>Категория 1</strong></td>
</tr>
<tr>
<td> </td>
<td align="left"><label>
<input class="fild" name="cn1" type="text" id="cn1" value="0" maxlength="8" onKeyUp="calc()"/>
</label>
Товар 1</td>
<td>- 6000</td>
</tr>

вот вместо поля ввода числа

</label></td>

мне нужен чекбокс, который будет переключать в этой строке value="" на 1 при поставленной галочке, и на 0 при непоставленной!

вот переменные и калькулятор, если нужны)

<script type="text/javascript">
function calc() {

a1 = parseInt(document.getElementById('cn1').value);
a2 = parseInt(document.getElementById('cn2').value);
a3 = parseInt(document.getElementById('cn3').value);
a4 = parseInt(document.getElementById('cn4').value);
a5 = parseInt(document.getElementById('cn5').value);
a6 = parseInt(document.getElementById('cn6').value);
for (i=1;i<=8;i++) {
if (a1==i) {document.getElementById('cn4').value=8*i};
if (a2==i) {document.getElementById('cn5').value=8*i};
if (a3==i) {document.getElementById('cn6').value=8*i};

}

total = a1 * 6000 + a2 * 8000 + a3 * 12000 + a4 * 2240 + a5 * 2520 + a6 * 2800; 
document.getElementById('totalprice').innerHTML = total;
document.getElementById('totpr').value = total;
}


function show_form (){
document.getElementById('tf1').style.display = "block"; 

}

</script>

Edited November 24, 2009 by sm1603

LunatiK · November 24, 2009

HTML:

<input class="fild" name="cn1" type="checkbox" id="cn1" value="0" maxlength="8" OnClick="calc()" />

а в коде скрипта делаем проверку document.getElementById('cn1').checked если true то в document.getElementById('cn1').value записываем единицу в противном случае ноль

далее по вашей же схеме

sm1603 · November 24, 2009

HTML:
<input class="fild" name="cn1" type="checkbox" id="cn1" value="0" maxlength="8" OnClick="calc()" />
а в коде скрипта делаем проверку document.getElementById('cn1').checked если true то в document.getElementById('cn1').value записываем единицу в противном случае ноль
далее по вашей же схеме

можно поподробнее, как сделать проверку... true... просто не так часто прходится этим заниматься, а у меня диплом через 3 недели)

LunatiK · November 24, 2009

ты же сам писал if (a1==i) {document.getElementById('cn4').value=8*i};

ну и вот на подобе того тока if (document.getElementById('cn1').checked==true) { ... } else { ... }

добавил:

ну или просто if (document.getElementById('cn1').checked) { ... } else { ... }

я не силён в Яваскрипте с синтаксисом могу путаться, посмотри в учебнике как правильней, или пускай меня поправят осведомлённые люди

Edited November 24, 2009 by LunatiK

sm1603 · November 24, 2009

if (document.getElementById('cn30').checked = true) {document.getElementById('cn30').value="1"} else {document.getElementById('cn30').value="0"};

короче работает, почти....

после того как галочка установлена я не могу её снять)

s0rr0w · November 24, 2009

LunatiK · November 24, 2009

s0rr0w, Элегантно и красиво :huh:

sm1603, а у вас в if (... = ...) , а надо if (... == ...). Одно равно - присваивание, два равно - сравнение

sm1603 · November 24, 2009

не работает(

s0rr0w, Элегантно и красиво
sm1603, а у вас в if (... = ...) , а надо if (... == ...). Одно равно - присваивание, два равно - сравнение

А когда == там он срабатывает через раз) точнее так, один раз она прибавляет сумму на поставленой галочке, воторой раз нет)

s0rr0w

наверное так и правильно, ... куда девать OnClick="calc()"? он же без неё считать не станет?

LunatiK · November 24, 2009

А когда == там он срабатывает через раз) точнее так, один раз она прибавляет сумму на поставленой галочке, воторой раз нет)

Странно всё это

if (document.getElementById('cn1').checked) {document.getElementById('cn1').value=1;} else {document.getElementById('cn1').value=0;}

вот так вроде работает

Добавил:

ну или: <input class="fild" name="cn1" type="checkbox" id="cn1" value="0" maxlength="8" OnClick="this.value = this.checked ? 1 : 0; calc()" />

Edited November 24, 2009 by LunatiK

sm1603 · November 24, 2009

ну или: <input class="fild" name="cn1" type="checkbox" id="cn1" value="0" maxlength="8" OnClick="this.value = this.checked ? 1 : 0; calc()" /> Так заработало) Спасибо)

sm1603 · November 24, 2009

а как можно сделать чтобы в эту ячейку выводился результат, без возможности корректировки? т.е просто чтобы не было никакого поля ввобда вообще?

Понимаю что я достал, но я просто лох в этом деле, а учиться уже некогда)))

Edited November 24, 2009 by sm1603

slavok47 · November 24, 2009

а как можно сделать чтобы в эту ячейку выводился результат, без возможности корректировки? т.е просто чтобы не было никакого поля ввобда вообще?
<td align="left"><input class="fild" name="cn4" type="text" id="cn4" value="0" maxlength="8" OnClick="calc()" /></td>
Понимаю что я достал, но я просто лох в этом деле, а учиться уже некогда)))

Используй "readonly"

<input class="fild" name="cn4" type="text" readonly id="cn4" value="0" maxlength="8" OnClick="calc()" />

readonly - Устанавливает, что поле не может изменяться пользователем.

http://htmlbook.ru/html/input.html

Sign In

Присвоить значение для Checkbox

Question

Link to comment

Share on other sites

13 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information