Как скрыть элементы html с помощью переключателя

Это вопрос с html/css/javascript для начинающих. Я бил головой о стену, но все еще не могу понять это. У меня есть простая веб-форма, которую пользователи заполняют (имя, адрес электронной почты и т. Д.) И то, как она должна работать, заключается в том, что, когда пользователь нажимает на переключатель, который говорит «Да», они видят выпадающее меню с заданным количеством элементов и когда они нажимают «Нет», они видят текстовое поле. У меня эта часть работает правильно, но я хочу, чтобы раскрывающееся меню и текстовое поле начали скрываться, а затем появляются, когда нажата кнопка «Да» или «Нет». Я пробовал style = display:hidden;, но когда я использовал это, текст и выпадающее меню больше не появлялись.Как скрыть элементы html с помощью переключателя

Большое спасибо за любые ответы!

Это код, я использую:

<tr align="left" valign="middle"> 
    <td colspan="1" rowspan="1"> 
    <p>&nbsp;</p> 
    </td> 
    <td colspan="1" rowspan="1"> 
    <p><b><font color="#cc0000" face="Georgia, Times New Roman, Times, serif" size="+2">*</font></b></p> 
    </td> 
    <td colspan="1" rowspan="1"> 
    <p>Do you own a Zaxwerks product?</p> 
    </td> 
    <td colspan="1" rowspan="1"> 
    <p><input id="customer" name="STATUS" onclick="javascript: test();" type="radio" value="Existing Customer" /> Yes<br /> 
    <input id="demo" name="STATUS" onclick="javascript: test();" type="radio" value="Downloaded Demo" /> No</p> 
    </td> 
    <script type="text/javascript"> 
    function test() { 
     if (document.getElementById('customer').checked) { 
     //Show 
     document.getElementById('show_customer').style.display = 'block'; 
     document.getElementById('show_customer2').style.display = 'block'; 
     document.getElementById('show_customer3').style.display = 'block'; 
     document.getElementById('show_customer4').style.display = 'block'; 

     //Hide 
     document.getElementById('show_demo').style.display = 'none'; 
     document.getElementById('show_demo2').style.display = 'none'; 
     document.getElementById('show_demo3').style.display = 'none'; 
     } else { 
     //Show 
     document.getElementById('show_demo').style.display = 'block'; 
     document.getElementById('show_demo2').style.display = 'block'; 
     document.getElementById('show_demo3').style.display = 'block'; 

     //Hide 
     document.getElementById('show_customer').style.display = 'none'; 
     document.getElementById('show_customer2').style.display = 'none'; 
     document.getElementById('show_customer3').style.display = 'none'; 
     document.getElementById('show_customer4').style.display = 'none'; 
     } 
    } 
    </script> 
    <td>&nbsp;</td> 
</tr> 
<tr> 
    <td colspan="1" rowspan="1" style="display: none;"> 
    <p>&nbsp;</p> 
    </td> 
    <td colspan="1" rowspan="1" style="display: none;"> 
    <div id="show_customer"> 
     <p><b><font color="#cc0000" face="Georgia, Times New Roman, Times, serif" size="+2">*</font></b></p> 
    </div> 

    <div id="show_demo" style="display: none;"> 
     <p><b><font color="#cc0000" face="Georgia, Times New Roman, Times, serif" size="+2">*</font></b></p> 
    </div> 
    </td> 
    <td colspan="1" rowspan="1" style="display: none;"> 
    <div id="show_customer2"> 
     <p>Product Owned:</p> 
    </div> 

    <div id="show_demo2" > 
     <p>Where did you hear about us?:</p> 
    </div> 
    </td> 
<!--This is where the user selects which product they own. (In the following code: value equals "what appears in the log file" what appears in the site menu)--> 
    <td colspan="1" rowspan="1"> 
    <div id="show_customer3" style="display: none;"> 
     <p><select id="WHAT" name="WHAT" size="1"> 
     <option selected="selected" value="">Select One</option> 
     <option value="Item 1">Item 1</option> 
     <option value="Item 2">Item 2</option> 
     <option value="Item 3">Item 3</option> 
     <option value="Item 4">Item 4</option> 
     <option value="Item 5">Item 5</option> 
     <option value="Item 6">Item 6</option> 
     <option value="Item 7">Item 8</option> 
     <option value="Item 9">Item 9</option> 
     <option value="Item 10">Item 10</option> 
     <option value="Item 11">Item 11</option> 
     <option value="Item 12">Item 12</option> 
     </select></p> 
    </div> 

    <div id="show_demo3" style="display: none;"> 
     <p> 
     <input maxlength="64" name="WHERE" size="30" type="text" value="" /> 
     </p> 
    </div> 
    </td> 
    <td>&nbsp;</td> 
</tr>

источник

2015-07-02 skinnydow

Используйте тот же display:none использовать в других местах в вашем коде. В частности эти линии

<div id="show_customer2" style="display: none;"> 
    <p>Product Owned:</p> 
</div> 

<div id="show_demo2" style="display: none;"> 
    <p>Where did you hear about us?:</p> 
</div>

Вот рабочий пример:

<tr align="left" valign="middle"> 
 
    <td colspan="1" rowspan="1"> 
 
    <p>&nbsp;</p> 
 
    </td> 
 
    <td colspan="1" rowspan="1"> 
 
    <p><b><font color="#cc0000" face="Georgia, Times New Roman, Times, serif" size="+2">*</font></b></p> 
 
    </td> 
 
    <td colspan="1" rowspan="1"> 
 
    <p>Do you own a Zaxwerks product?</p> 
 
    </td> 
 
    <td colspan="1" rowspan="1"> 
 
    <p><input id="customer" name="STATUS" onclick="javascript: test();" type="radio" value="Existing Customer" /> Yes<br /> 
 
    <input id="demo" name="STATUS" onclick="javascript: test();" type="radio" value="Downloaded Demo" /> No</p> 
 
    </td> 
 
    <script type="text/javascript"> 
 
    function test() { 
 
     if (document.getElementById('customer').checked) { 
 
     //Show 
 
     document.getElementById('show_customer').style.display = 'block'; 
 
     document.getElementById('show_customer2').style.display = 'block'; 
 
     document.getElementById('show_customer3').style.display = 'block'; 
 
     document.getElementById('show_customer4').style.display = 'block'; 
 

 
     //Hide 
 
     document.getElementById('show_demo').style.display = 'none'; 
 
     document.getElementById('show_demo2').style.display = 'none'; 
 
     document.getElementById('show_demo3').style.display = 'none'; 
 
     } else { 
 
     //Show 
 
     document.getElementById('show_demo').style.display = 'block'; 
 
     document.getElementById('show_demo2').style.display = 'block'; 
 
     document.getElementById('show_demo3').style.display = 'block'; 
 

 
     //Hide 
 
     document.getElementById('show_customer').style.display = 'none'; 
 
     document.getElementById('show_customer2').style.display = 'none'; 
 
     document.getElementById('show_customer3').style.display = 'none'; 
 
     document.getElementById('show_customer4').style.display = 'none'; 
 
     } 
 
    } 
 
    </script> 
 
    <td>&nbsp;</td> 
 
</tr> 
 
<tr> 
 
    <td colspan="1" rowspan="1" style="display: none;"> 
 
    <p>&nbsp;</p> 
 
    </td> 
 
    <td colspan="1" rowspan="1" style="display: none;"> 
 
    <div id="show_customer"> 
 
     <p><b><font color="#cc0000" face="Georgia, Times New Roman, Times, serif" size="+2">*</font></b></p> 
 
    </div> 
 

 
    <div id="show_demo" style="display: none;"> 
 
     <p><b><font color="#cc0000" face="Georgia, Times New Roman, Times, serif" size="+2">*</font></b></p> 
 
    </div> 
 
    </td> 
 
    <td colspan="1" rowspan="1" style="display: none;"> 
 
    <div id="show_customer2" style="display: none;"> 
 
     <p>Product Owned:</p> 
 
    </div> 
 

 
    <div id="show_demo2" style="display: none;"> 
 
     <p>Where did you hear about us?:</p> 
 
    </div> 
 
    </td> 
 
<!--This is where the user selects which product they own. (In the following code: value equals "what appears in the log file" what appears in the site menu)--> 
 
    <td colspan="1" rowspan="1"> 
 
    <div id="show_customer3" style="display: none;"> 
 
     <p><select id="WHAT" name="WHAT" size="1"> 
 
     <option selected="selected" value="">Select One</option> 
 
     <option value="Item 1">Item 1</option> 
 
     <option value="Item 2">Item 2</option> 
 
     <option value="Item 3">Item 3</option> 
 
     <option value="Item 4">Item 4</option> 
 
     <option value="Item 5">Item 5</option> 
 
     <option value="Item 6">Item 6</option> 
 
     </select></p> 
 
    </div> 
 

 
    <div id="show_demo3" style="display: none;"> 
 
     <p> 
 
     <input maxlength="64" name="WHERE" size="30" type="text" value="" /> 
 
     </p> 
 
    </div> 
 
    </td> 
 
    <td>&nbsp;</td> 
 
</tr>

источник

2015-07-02 01:18:03 depperm

Благодарим depperm за помощь! Это скрывает текстовое поле и выпадающее меню, однако при нажатии на переключатели текстовые элементы не отображаются, поэтому форматирование отключено. – skinnydow

какие текстовые элементы? – depperm

Элементы текста «Собственный продукт» и «Где вы узнали о нас?» – skinnydow

Если вы готовы реструктурировать часть вашей информации, это может быть легко сделано с помощью CSS:

<style type="text/css"> 

.customers , .demo{ 
    display:none; 
} 
#customer[type="radio"]:checked ~ .customers{ 
    display:block; 
} 
#demo[type="radio"]:checked ~ .demo{ 
    display:block; 
} 


</style> 


<table> 
<tr> 
<td> 
    <input id="customer" name="STATUS" type="radio" value="Existing Customer" /> Yes 
    <input id="demo" name="STATUS" type="radio" value="Downloaded Demo" /> No 
    <div class="customers"> 
     <p>Product Owned:</p> 
    </div> 

    <div class="demo"> 
     <p>Where did you hear about us?:</p> 
    </div>  



</td> 
</tr> 
</table>

источник

2015-07-02 01:50:09 Robbie

Как скрыть элементы html с помощью переключателя

ответ

Смежные вопросы