как сделать зависимость checkbox и select

[MasterHrust]

Здравствуйте!
Как сделать в java script зависимость checkbox и select?
Например:
Если поставить галку в checkbox, то появиться seleсt поле для выбора.
Есть вот так:


А после отметки вот так:


Спасибо.

[walik]

Сделать селект невидимым, при клике на чекбокс показывать/прятать селект, то есть манипулировать свойством display стилей у элемента.

[MasterHrust]

Хм. А как это сделать - хоть пример какой-нить можно? Я только изучаю js.

[MasterHrust]

Я написал пока такой код:

function izmen_rad(chto){
if(chto==1){
document.calcForm.master2_rad.options.length=0;
document.calcForm.master2_rad.options[0]=new Option("Выбрать количество", "0", true, false);
document.calcForm.master2_rad.options[1]=new Option("Одна", "45", false, false);
document.calcForm.master2_rad.options[2]=new Option("Две", "90", false, false);
document.calcForm.master2_rad.options[3]=new Option("Три", "135", false, false);
document.calcForm.master2_rad.options[4]=new Option("Четыре", "180", false, false);
document.calcForm.master2_rad.options[5]=new Option("Пять", "225", false, false);
document.calcForm.master2_rad.options[6]=new Option("Шесть", "270", false, false);
}
if(chto==2){
document.calcForm.master2_rad.options.length=0;
document.calcForm.master2_rad.options[0]=new Option("---", "0", false, false);
}

<input type="radio" name="rad" value="1" onclick="izmen_rad(this.value)"> Да<br />
	<input type="radio" name="rad" value="2" onclick="izmen_rad(this.value)"> Нет<br />
	<select id='master2_rad' name="master2_rad" size="1">
        <option value="0">---</option>

А хотелось красивее сделать_)

[walik]

<input type="checkbox" onclick="change();" value="1" />
<select style="display: none;" id="select">
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
</select>
  <script>
function change() {
  var s = document.getElementById('select');
  s.style.display == 'none' ? s.style.display = '' : s.style.display = 'none';
}
  </script>

[MasterHrust]

спасибо

[melky]

walik, эх да закешировать бы s.style!

[vaskin]

А если чекбоксов много(например 10)и каждый нужно повесить на конкретный селект?То к значению change приписываем 1...и т.д и меняем id у селектов?
Видок получается не сахарный,многовато одних и тех же функций:

<input type="checkbox" onclick="change();" value="1" />
<input type="checkbox" onclick="change2();" value="1" />
<input type="checkbox" onclick="change3();" value="1" />
<input type="checkbox" onclick="change4();" value="1" />

<select style="display: none;" id="select">
<select style="display: none;" id="select2">
<select style="display: none;" id="select3">
<select style="display: none;" id="select4">

function change() {
		
	  var s = document.getElementById('select');
	  
	 s.style.display == 'none' ? s.style.display = '' : s.style.display = 'none';
	 
	};
	
		function change2() {
		
	  var s = document.getElementById('select2');
	  
	 s.style.display == 'none' ? s.style.display = '' : s.style.display = 'none';
	 
	};
		function change3() {
		
	  var s = document.getElementById('select3');
	  
	 s.style.display == 'none' ? s.style.display = '' : s.style.display = 'none';
	 
	};
			function change4() {
		
	  var s = document.getElementById('select4');
	  
	 s.style.display == 'none' ? s.style.display = '' : s.style.display = 'none';
	 
	};

Есть какие нибудь варианты попроще сделать?

[melky]

тут можно приписать атрибут, по которому скрипт будет определять номер селекта.

например, так :

<input type="checkbox" onclick="*!*change(this);*/!*" value="1" *!*for=""*/!*/>
<input type="checkbox" onclick="*!*change(this);*/!*" value="1" *!*for="2"*/!*/>
<input type="checkbox" onclick=*!*"change(this);*/!*" value="1" *!*for="3"*/!*/>
<input type="checkbox" onclick="*!*change(this);*/!*" value="1" *!*for="4"*/!*/>

<select style="display: none;" id="select">
<select style="display: none;" id="select2">
<select style="display: none;" id="select3">
<select style="display: none;" id="select4">

function change(s) {
	s = s.getAttribute("for") || "";
	
	 s = document.getElementById('select'+s);
	  
	 s.style.display == 'none' ? s.style.display = '' : s.style.display = 'none';
	 
	};

[vaskin]

Супер!Спасибо!