рони, вот корявенький живой пример для понимания моих запутанных мыслей, помогите мне их распутать)
<html>
<head>
<title> </title>
</head>
<body>
<li>
<label>check1</label>
<input onclick="show('1')" type="checkbox" id="c1" name="option1" value="a2">
</li>
<li>
<label>check2</label>
<input onclick="show('2')" type="checkbox" id="c2" name="option2" value="a2">
</li>
<li>
<label>check3</label>
<input onclick="show('3')" type="checkbox" id="c3" name="option3" value="a2">
</li>
<li>
<label>check4</label>
<input onclick="show('4')" type="checkbox" id="c4" name="option4" value="a2">
</li>
<li>
<label>check5</label>
<input onclick="show('5')" type="checkbox" id="c5" name="option5" value="a2">
</li>
<li>
<label>check6</label>
<input onclick="show('6')" type="checkbox" id="c6" name="option6" value="a2">
</li>
<table>
<tr>
<td>
<div id="1" style="display: none">
<li><label>Input1</label></li>
<li><input class="i1" type="text" name="name" /></li>
</div>
</td>
<td>
<div id="2" style="display:none">
<li><label>Input2</label></li>
<li><input class="i2" type="text" name="name" /></li>
</div>
</td>
<td>
<div id="3" style="display: none">
<li><label>Input3</label> </li>
<li><input class="i3" type="text" name="name" /></li>
</div>
</td>
</tr>
<tr>
<td>
<div id="4" style="display: none">
<li><label>Input4</label></li>
<li><input class="i4" type="text" name="name" /></li>
</div>
</td>
<td>
<div id="5" style="display: none">
<li><label>Input5</label></li>
<li><input class="i5" type="text" name="name" /></li>
</div>
</td>
<td>
<div id="6" style="display: none">
<li><label>Input6</label></li>
<li><input class="i6" type="text" name="name" /></li>
</div>
</td>
</tr>
</table>
<script type="text/javascript">
function show(id){
display = document.getElementById(id).style.display;
if(display=='none'){
document.getElementById(id).style.display='block';
}else{
document.getElementById(id).style.display='none';
}
}
</script>
</body>
</html>
Вот пример, нажмите скажем чекбокс1 и любой чекбокс со следующей строки или чекбосы 3 и 4. Нужно чтобы вне зависимости от порядка в котором выбираешь чекбоксы (не обязательно 1-2-3, например 3-4-6) формы появлялись по порядку - сначала в первой строке, если после выбранного 3его чекбокса выбрать четвертый, то соответственно 4я форма должна появиться на следующей строчке. |
AlexOk,
я пас |
рони, это хоть как-нибудь реализуемо?)) Куда копать?
Спасибо за участие) |
AlexOk,
реализуемо осталось только понять чего вы хотите, и li внутри div ... без переводчика сложновато ... |
Знаю :(
Просто хочу, чтоб вне зависимости от того какие чекбоксы выбраны (3-5-6), формы привязанные к чекбоксу появлялись последовательно (построчно) |
AlexOk,
<html>
<head>
<title> </title>
<style type="text/css">
.tab{
width: 300px;
}
.tab > div{
float: left;
width: 100px;
}
.tab > div input{
width: 100%;
}
</style>
</head>
<body>
<li>
<label>check1</label>
<input onclick="show('1')" type="checkbox" id="c1" name="option1" value="a2">
</li>
<li>
<label>check2</label>
<input onclick="show('2')" type="checkbox" id="c2" name="option2" value="a2">
</li>
<li>
<label>check3</label>
<input onclick="show('3')" type="checkbox" id="c3" name="option3" value="a2">
</li>
<li>
<label>check4</label>
<input onclick="show('4')" type="checkbox" id="c4" name="option4" value="a2">
</li>
<li>
<label>check5</label>
<input onclick="show('5')" type="checkbox" id="c5" name="option5" value="a2">
</li>
<li>
<label>check6</label>
<input onclick="show('6')" type="checkbox" id="c6" name="option6" value="a2">
</li>
<div class="tab" >
<div id="1" style="display: none">
<label>Input1</label>
<input class="i1" type="text" name="name" />
</div>
<div id="2" style="display:none">
<label>Input2</label>
<input class="i2" type="text" name="name" />
</div>
<div id="3" style="display: none">
<label>Input3</label>
<input class="i3" type="text" name="name" />
</div>
<div id="4" style="display: none">
<label>Input4</label>
<input class="i4" type="text" name="name" />
</div>
<div id="5" style="display: none">
<label>Input5</label>
<input class="i5" type="text" name="name" />
</div>
<div id="6" style="display: none">
<label>Input6</label>
<input class="i6" type="text" name="name" />
</div>
</div>
<script type="text/javascript">
function show(id){
display = document.getElementById(id).style.display;
if(display=='none'){
document.getElementById(id).style.display='block';
}else{
document.getElementById(id).style.display='none';
}
}
</script>
</body>
</html>
|
Спасибо огромное! Представлял себе все несколько ужаснее...
Скачал книжек буду учить js, html, css. Спасибо |
| Часовой пояс GMT +3, время: 03:03. |