как сделать зависимость checkbox и select
Здравствуйте!
Как сделать в java script зависимость checkbox и select? Например: Если поставить галку в checkbox, то появиться seleсt поле для выбора. Есть вот так:  А после отметки вот так:  Спасибо. |
Сделать селект невидимым, при клике на чекбокс показывать/прятать селект, то есть манипулировать свойством display стилей у элемента.
|
Хм. А как это сделать - хоть пример какой-нить можно? Я только изучаю js.
|
Я написал пока такой код:
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>
А хотелось красивее сделать_) |
<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>
|
спасибо
|
walik, эх да закешировать бы s.style!
|
А если чекбоксов много(например 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';
};
Есть какие нибудь варианты попроще сделать? |
тут можно приписать атрибут, по которому скрипт будет определять номер селекта.
например, так : <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';
};
|
Супер!Спасибо!
|
| Часовой пояс GMT +3, время: 02:09. |