Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > JavaScript: для новичков > отображение чеккбоксов


Автор: supervladislav 23.4.2008, 16:21
Здравствуйте !!!!Извеняюсь  за очень большие посты до этого.У меня есть кусок формы см ниже ,там есть три столбика типов недвижимости ,каждый 
из которых помечан радиобаттомом (выводится динамически ) в случае выбора  в эллемент найм добовляется элемент value с названием текущего столбика,в столбике с выбаром своиств недвижемости стоит  чекбокс,мне необходимо реализовать следущее чтоб при смене радиобаттома на другой, появлялись чеккбоксы в текущем столбике ,но дело в том ,что они выводятся динамически ,как лучше реализовать такое .
Я с javascript дружу не очень к сожалению ,но темне менее написал вот енто ,примитивно 
ttype массив куда передаётся тип недвижимости который был выбран oz-id формы
Код

function onload(){
if(ttype=="тип недвижимости"){
window.open("adddob")
document.getElementById('itaz').style.display = 'none';

}
}


Код

<table cellspacing=0 cellpadding=0 border=1 width=100% height="300px" style="white-space:nowrap;">
    <tr ><td align="left" colspan="3">Тип недвижимости</td></tr>
        <tr>
        
            <? while ($datt1=mysql_fetch_array($tt1)) { if (!$ttype2) $ttype2=$datt1[name];?>
            <td align=left><span class=gr><input onClick="gog('<? echo $datt1[name]; ?>', '<? echo $ttype; ?>', this.form.region.options[this.form.region.selectedIndex].text, this.form.gorod.options[this.form.gorod.selectedIndex].text, document.getElementById('allrayon'), document.getElementById('allmetro'), document.getElementById('allttype2'), document.getElementById('allttype3'));" type=radio name=ttype2 value='<? echo $datt1[name]; ?>' <? if ($datt1[name] == $ttype2) echo "CHECKED";?>><? echo $datt1[name]; ?></td>
            <? } ?>
        </tr>
        
    

        <tr><? echo($ttype2);?>
            <? mysql_data_seek($tt1,0);
            while ($datt1=mysql_fetch_array($tt1)) {
                $tt2=mysql_query("SELECT * FROM $T_TTYPE3 WHERE ttype='$datt1[name]' ORDER BY num ASC;"); // тип недвижимости ?>
                <td align=left valign=top><span class=gr>
                <? while($datt2=mysql_fetch_array($tt2)) { 
             echo "<input onclick='disable_ttype3($datt2[razd]);' type=checkbox name=$datt2[name] value='$datt2[name]' style='visibility: visible;'>kkk"; 
                 echo "<input onclick='disable_ttype3($datt2[razd]);' type=checkbox name=$datt2[name] value='$datt2[name]' style='visibility: hidden;'>"; 
                    echo $datt2[name]."<br>"; 
                 }
                if ($datt1[name] != "Недвижимость для автотранспорта") {
                    echo "<hr>";
                    $tt2=mysql_query("SELECT * FROM $T_TTYPE3 WHERE ttype='Дополнительно' ORDER BY num ASC;");
                    while($datt2=mysql_fetch_array($tt2)) {
                    
                         echo"<input type=checkbox name=ttype3 value='$datt2[name]' style='visibility: visible;'>cddf"; 
                          echo $datt2[name]."<br>";}}}
                    
                        
                  ?>
                </td><? } ?>
            
        </tr>
        </table>


Автор: krundetz 24.4.2008, 11:01
Насколько я понял вам нужно сделать так:
Есть чекбоксы верхниго и подчиненного уровня. Когда выбирается чекбокс верхнего уровня все чекбоксы подчиненного становятся доступными для выбора.
Если я прав то можно сделать так:
Для каждой группы делаете верхний обединяющий их элемент например див. В него помешаете чекбокс верхнего уровня и див с подчиненными чекбоксами. Далее средствами JavaScript при выборе чекбокса находите его предка у этого предка находите потомка div и уже у него пробегаете по всем потомкам чекбоксам и делаете их активными.

Вот примерная HTML разметка
Код

<div>
    <!-- Чекбокс верхнего уровня -->
    <input type="checkbox">
    <div>
        <!-- Подчиненные чекбоксы -->
        <input type="checkbox">
        <input type="checkbox">
        <input type="checkbox">
    </div>
</div>

Автор: supervladislav 24.4.2008, 11:45
а какое событие нужно применять  будет onchange??? для чекбоксов нижнего(подчинённого уровня) Могли бы вы хотябы намекнуть  как это реализовать ,какие  средства языка java script  использовать???

Автор: krundetz 24.4.2008, 15:27
Все очень просто:
Код

<div>
    <!-- Чекбокс верхнего уровня -->
    <input type="checkbox" onchange="функция_обработчик(this)">
    <div>
        <!-- Подчиненные чекбоксы -->
        <input type="checkbox" disabled>
        <input type="checkbox" disabled>
        <input type="checkbox"disabled>
    </div>
</div>

1. В функцию обработчик передаем элемент её вызвавший 
2. далее отталкиваясь от него находим предка этого элемента
3. у предка находим потомка div
4. уже у него находим всех потомков  <input type="checkbox">
5. убираем у них атрибут disabled если он стоит или ставит его если не стоит

Автор: supervladislav 24.4.2008, 15:53
типо вот ентого


Код

<script>
function agreeForm(f) { 

// Если поставлен флажок, снимаем блокирование кнопки
if (f.agree.checked) f.submit.disabled = 0

// В противном случае вновь блокируем кнопку
else f.submit.disabled = 1

}
</script>

Автор: krundetz 25.4.2008, 08:52
Несовсем.
Код

function switchElement(element)
{
     if(element.disabled)
         element.disabled = false;
     else
         element.disabled = true;
}

Тоесть вы находите нужный вам элемент и скармливает его этой функции. А точнее у вас после нахождения потомков будет массив из элементов checkbox вы пробегаете этот массив в цикле и для каждого элемента вызываете эту функцию.

Автор: supervladislav 25.4.2008, 13:55
а  скажите если у меня будет значение в массиве ttype  ,кторое динамически будет передаваться  из value  ,как мне быть в таком случае, я имею ввиду я не совсем доганяю как проверять в таком случае по значению массива какая кнопка нажата.Ну например если значение в массиве ttype=="коммерческая недвижимость" то включаем соотведствующий ему столбец.

Автор: krundetz 25.4.2008, 14:47
Подразумевается что скрипт знает как сформировать массив элементов которые должны стать доступными после нажатия кнопки или выбора checkbox верхнего уровня.
Допустим. У меня есть такая табличка:
Код

<table>
    <tr>
    <td><input id='nechet' type="checkbox"></td><td>Выбрать четные</td>
    </tr>
    <tr>
    <td><input id='chet' type="checkbox"></td><td>Выбрать нечетные</td>
    </tr>
    <tr>
    <td><input type="checkbox" name='nechet'></td><td>Нечетное</td>
    </tr>
    <tr>
    <td><input type="checkbox" name='chet'></td><td>Четное</td>
    </tr>
    <tr>
    <td><input type="checkbox" name='nechet'></td><td>Нечетное</td>
    </tr>
</table>

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

//получаем всех флажки формы
elements = forms[0].checkbox;
size = elements.llength;
for(var i = 0; i < size; i++)
{
//проверяем является ли флажок нужным нам
if(elements[i].name == 'chet')
{
    //запускю функцию смены доступности
    switchElement(elements[i]);
}
}

это javascript выполняемый при выборе фложка "выбрать четные"
Надеюсь смысл стал более понятин. В этой строчке может быть ошибка 
Код

elements = forms[0].checkbox;

так как в подсидневной жизни для поиска необходимых элементов использую jQuery, и как это делается на чистом javascript подзабыл.

в общем у вас приходит значение в ttype и у вас в скрипте должно быть определено как по нему выбрать массив необходимых флажков.

Автор: supervladislav 25.4.2008, 16:05
вот чуть-чуть поправил ,но при смене радиобаттомов отображается только один чеккбокс во втором столбике сверху.

Код

script language="javascript">
function  zablok(){
if(document.one.ttype1)
{document.getElementById('01').style.display = 'block';
document.getElementById('02').style.display = 'none';
document.getElementById('03').style.display = 'none';}
if(document.one.ttype2)
{document.getElementById('02').style.display = 'block';
document.getElementById('01').style.display = 'none';
document.getElementById('03').style.display = 'none';}
if(document.one.ttype4)
{document.getElementById('03').style.display = 'block';
document.getElementById('02').style.display = 'none';
document.getElementById('01').style.display = 'none';
}




}
</script>


Код

<form action="min.html" method="get" name="one" id="one">
<table align="center" cellpadding="0" cellspacing="0" border="0">
<tr valign="top">
<td align="center"><input type="radio" name="ttype" value="Жилая недвижимость"  id="ttype1"    onclick="zablok();">Жилая недвижимость</td>
<td align="center"><input type="radio" name="ttype" value="Коммерческая недвижимость"  id="ttype2" onclick="zablok();">Коммерческая недвижимость</td>
<td align="center"><input type="radio" name="ttype" value="Недвижимость для автотранспорта"  id="ttype4"   onclick="zablok();">Недвижимость для автотранспорта</td>
</tr>
<tr align="left">
<td><input type="checkbox" name="ttype3" value="1 к кв" id="01">1 к кв.</td>
<td><input  type="checkbox" name="ttype3" value="Универсальное помещение" id="02" style="display:none;">Универсальное помещение</td>
<td><input type="checkbox" name="ttype3" value="Место в паркинге" id="03" style="display:none;">Место в паркинге</td>
</tr>
<tr align="left">
<td><input type="checkbox" name="ttype3" value="2 к кв" id="01">2 к кв.</td>
<td><input type="checkbox" name="ttype3" value="Офис" id="02" style="display:none;">Офис</td>
<td><input type="checkbox" name="ttype3" value="Гараж" id="03" style="display:none";>Гараж</td>
</tr>
<tr align="left">
<td><input type="checkbox" name="ttype3" value="3 к кв" id="01">3 к кв.</td>
<td><input type="checkbox" name="ttype3" value="Торговое помещение" id="02" style="display:none;">Торговое помещение</td>
<td><input type="checkbox" name="ttype3" value="Открытая автостоянка" id="03" style="display:none;">Открытая автостоянка</td>
</tr>
<tr align="left">
<td><input type="checkbox" name="ttype3" value="4-х и более к кв" id="01" >4-х и более к кв.</td>
<td><input type="checkbox" name="ttype3" value="Склад" id="02" style="display:none;">Склад</td>
<td></td>
</tr>
<tr align="left">
<td><input type="checkbox" name="ttype3" value="Земельный участок" id="01" >Земельный участок </td>
<td><input type="checkbox" name="ttype3" value="Производственное помещение" id="02" style="display:none;">Производственное помещение</td>
<td></td>
</tr>
<tr align="left">
<td><hr width="100%" size=2><input  name="ttype3" value="Новостройка" type="checkbox" id="01" ">Новостройка</td>
<td><input type="checkbox" name="ttype3" value="Здание" id="02" style="display:none;">Здание</td>
<td></td>
</tr>
<tr align="left">
<td><input type="checkbox" name="ttype3" value="Вторичка" id="01" >Вторичка</td>
<td><input type="checkbox" name="ttype3" value="Здание с участком" id="02" style="display:none;">Здание с участком</td>
<td></td>
</tr>
<tr align="left">
<td><input type="checkbox" name="ttype3" value="Наличие парковки" id="01">Наличие парковки</td>
<td><input type="checkbox" name="ttype3" value="Земельный участок" id="02" style="display:none;">Земельный участок</td>
<td></td>
</tr>
<tr align="left">
<td><input type="checkbox" name="ttype3" value="Охрана" id="01" >Охрана</td>
<td><hr width="100%" size=2><input type="checkbox" name="ttype3" value="Новостройка" id="02" style="display:none;">Новостройка</td>
<td></td>
</tr>
<tr align="left">
<td></td>
<td><input type="checkbox" name="ttype3" value="Вторичка" id="01" style="display:none;">Вторичка</td>
<td></td>
</tr>
<tr align="left">
<td></td>
<td><input type="checkbox" name="ttype3" value="Наличие парковки" id="01" style="display:none;">Наличие парковки</td>
<td></td>
</tr>
<tr align="left">
<td></td>
<td><input type="checkbox" name="ttype3" value="Охрана" id="02" style="display:none;">Охрана</td>
<td></td>
</tr>
<tr align="left">
<td></td>
<td></td>
<td></td>
</tr>

</table>
</form>


Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)