Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   снятие галочек checkbox (https://javascript.ru/forum/misc/35374-snyatie-galochek-checkbox.html)

LOMANI 09.02.2013 01:24
снятие галочек checkbox
 
<script type="text/javascript"><!--
function ShowBlock(n) {
document.getElementById('block'+(3-n)).style.display = 'none';
document.getElementById('block'+n).style.display = 'block';
};
//--></script>

<input onclick="ShowBlock(1)" name="table_db" type="radio" value="catalog">Каталог

<div id="block1" style="display:none">
<input type="checkbox" name="text" value="text">
(text)Описание категории<br>
<input type="checkbox" name="description" value="description">
(description)Описание 2 категории<br>
<input type="checkbox" name="keywords" value="keywords">
(keywords)Ключевые слова категори
</div>

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

Deff 09.02.2013 03:06 
<script type="text/javascript">
 function ShowBlock(n) {
 var a = document.getElementById('block'+(3-n));
 a.innerHTML=a.innerHTML; a.style.display = 'none';
 document.getElementById('block'+n).style.display = 'block';
 };
</script>


 <input onclick="ShowBlock(1)" name="table_db" type="radio" value="catalog">Каталог
 <input onclick="ShowBlock(2)" name="table_db" type="radio" value="catalog">Каталог


 <div id="block2" style="display:none">
 <input type="checkbox" name="text" value="text">
 (text)Описание категории<br>
 <input type="checkbox" name="description" value="description">
 (description)Описание 2 категории<br>
 <input type="checkbox" name="keywords" value="keywords">
 (keywords)Ключевые слова категори
 </div>

 <div id="block1" style="display:none">
 <input type="checkbox" name="text" value="text">
 (text)Описание категории<br>
 <input type="checkbox" name="description" value="description">
 (description)Описание 3 категории<br>
 <input type="checkbox" name="keywords" value="keywords">
 (keywords)Ключевые слова категори
 </div>

danik.js 09.02.2013 04:53
Пожалейте своих пользователей, проставьте атрибут for для <label>. Либо располагайте инпуты внутри <label>

LOMANI 09.02.2013 10:43
Deff,
спасибо работает
такой нюанс.... больше 2х блоков не работает, т.е. не открываются при выборе radio... у меня их 5 пока что
пытался менять 'block'+(3-n)); в принципи блоки стали показыватся, но как то криво... сразу 2 например другие не показывает

LOMANI 09.02.2013 11:09 
<form id="form1" name="form1" method="post" action="/null/seriya_null.php">
<p>таблица в базе:</p>
<input onclick="ShowBlock(1)" name="table_db" type="radio" value="catalog">Каталог
<input onclick="ShowBlock(2)" name="table_db" type="radio" value="seriya">Серия
<input onclick="ShowBlock(3)" name="table_db" type="radio" value="seat">Стулья
<input onclick="ShowBlock(4)" name="table_db" type="radio" value="metal">Метал
<input onclick="ShowBlock(5)" name="table_db" type="radio" value="modul">Модуль

<hr size="1">
<p>Параметры поиска:</p>
<p>
<table border="0">
<tr>
<td>
		<div id="block1" style="display:none">
<input type="checkbox" name="pict" value="pict">
(pict)Большая картинка<br>
<input type="checkbox" name="pict_alt" value="pict_alt">
(pict_alt)ALT для большой картинки<br>
<input type="checkbox" name="text" value="text">
(text)Описание категории<br>
<input type="checkbox" name="description" value="description">
(description)Описание 2 категории<br>
<input type="checkbox" name="keywords" value="keywords">
(keywords)Ключевые слова категори
		</div>

		<div id="block2" style="display:none">
<p>
<input type="checkbox" id="hideTextField" onclick="changeVisibility('textFieldBlock2', checked, 'testTextField2')"/>
<span>(desc)Количество (минимум) знаков в описании: </span>
<div id="textFieldBlock2"><input disabled="disabled" id="testTextField2" type="text" name="desc" value="30"></div>
</p>
<p><input type="checkbox" id="hideTextField" onclick="changeVisibility('textFieldBlock1', checked, 'testTextField1')"/>
<span>(tech)Количество (минимум) знаков в техническом описании: </span>
<div id="textFieldBlock1"><input disabled="disabled" id="testTextField1" type="text" name="tech" value="30"></div>
</p>
<input type="checkbox" name="pict" value="pict">
(pict)Большая картинка<br>
<input type="checkbox" name="img" value="img">
(img)Маленькая картинка<br>
<input type="checkbox" name="pict_alt" value="pict_alt">
(pict_alt)ALT для большой картинки<br>
<input type="checkbox" name="img_alt" value="img_alt">
(img_alt)ALT для маленькой картинки<br>
<input type="checkbox" name="rus_tpl" value="rus_tpl">
(rus_tpl){1} - RUS шаблон метаинформации<br>
<input type="checkbox" name="eng_tpl" value="eng_tpl">
(eng_tpl){2} - ENG шаблон метаинформации
		</div>


		<div id="block3" style="display:none">
<p>
<input type="checkbox" id="hideTextField" onclick="changeVisibility('textFieldBlock2', checked, 'testTextField2')"/>
<span>(desc)Количество (минимум) знаков в описании: </span>
<div id="textFieldBlock2"><input disabled="disabled" id="testTextField2" type="text" name="desc" value="30"></div>
</p>
<input type="checkbox" name="pict" value="pict">
(pict)Большая картинка<br>
<input type="checkbox" name="img" value="img">
(img)Маленькая картинка<br>
<input type="checkbox" name="rus_tpl" value="rus_tpl">
(rus_tpl){1} - RUS шаблон метаинформации<br>
<input type="checkbox" name="eng_tpl" value="eng_tpl">
(eng_tpl){2} - ENG шаблон метаинформации
		</div>

		<div id="block4" style="display:none">
<input type="checkbox" name="pict" value="pict">
(pict)Большая картинка<br>
<input type="checkbox" name="img" value="img">
(img)Маленькая картинка<br>
<input type="checkbox" name="rus_tpl" value="rus_tpl">
(rus_tpl){1} - RUS шаблон метаинформации<br>
<input type="checkbox" name="eng_tpl" value="eng_tpl">
(eng_tpl){2} - ENG шаблон метаинформации
<p>
<input type="checkbox" id="hideTextField" onclick="changeVisibility('textFieldBlock2', checked, 'testTextField2')"/>
<span>(desc)Количество (минимум) знаков в описании: </span>
<div id="textFieldBlock2"><input disabled="disabled" id="testTextField2" type="text" name="desc" value="30"></div>
</p>
		</div>
		<div id="block5" style="display:none">
<input type="checkbox" name="pict" value="pict">
(pict)Большая картинка<br>
<input type="checkbox" name="img" value="img">
(img)Маленькая картинка<br>		
<input type="checkbox" name="title" value="title">
(title)<br>
<p>
<input type="checkbox" id="hideTextField" onclick="changeVisibility('textFieldBlock2', checked, 'testTextField2')"/>
<span>(desc)Количество (минимум) знаков в описании: </span>
<div id="textFieldBlock2"><input disabled="disabled" id="testTextField2" type="text" name="desc" value="30"></div>
</p>
		</div>
		
</td>
</tr>
</table>
</p>
<hr size="1">


<p>
<input type="submit" value="Проверить">
&nbsp;&nbsp;&nbsp;&nbsp;<input type="reset" value="Очистить форму">
</p>

</form>

danik.js 09.02.2013 11:43 
<script type="text/javascript">
    (function(){
        var activeBlock = null;
        window.ShowBlock = function(n) {
            if (activeBlock) {
                activeBlock.style.display = 'none';
                activeBlock.innerHTML = activeBlock.innerHTML;
            }
            activeBlock = document.getElementById('block' + n);
            activeBlock.style.display = 'block';
        };
    })();
</script>



<form id="form1" name="form1" method="post" action="/null/seriya_null.php">
<p>таблица в базе:</p>
<input onclick="ShowBlock(1)" name="table_db" type="radio" value="catalog">Каталог
<input onclick="ShowBlock(2)" name="table_db" type="radio" value="seriya">Серия
<input onclick="ShowBlock(3)" name="table_db" type="radio" value="seat">Стулья
<input onclick="ShowBlock(4)" name="table_db" type="radio" value="metal">Метал
<input onclick="ShowBlock(5)" name="table_db" type="radio" value="modul">Модуль
 
<hr size="1">
<p>Параметры поиска:</p>
<p>
<table border="0">
<tr>
<td>
        <div id="block1" style="display:none">
<input type="checkbox" name="pict" value="pict">
(pict)Большая картинка<br>
<input type="checkbox" name="pict_alt" value="pict_alt">
(pict_alt)ALT для большой картинки<br>
<input type="checkbox" name="text" value="text">
(text)Описание категории<br>
<input type="checkbox" name="description" value="description">
(description)Описание 2 категории<br>
<input type="checkbox" name="keywords" value="keywords">
(keywords)Ключевые слова категори
        </div>
 
        <div id="block2" style="display:none">
<p>
<input type="checkbox" id="hideTextField" onclick="changeVisibility('textFieldBlock2', checked, 'testTextField2')"/>
<span>(desc)Количество (минимум) знаков в описании: </span>
<div id="textFieldBlock2"><input disabled="disabled" id="testTextField2" type="text" name="desc" value="30"></div>
</p>
<p><input type="checkbox" id="hideTextField" onclick="changeVisibility('textFieldBlock1', checked, 'testTextField1')"/>
<span>(tech)Количество (минимум) знаков в техническом описании: </span>
<div id="textFieldBlock1"><input disabled="disabled" id="testTextField1" type="text" name="tech" value="30"></div>
</p>
<input type="checkbox" name="pict" value="pict">
(pict)Большая картинка<br>
<input type="checkbox" name="img" value="img">
(img)Маленькая картинка<br>
<input type="checkbox" name="pict_alt" value="pict_alt">
(pict_alt)ALT для большой картинки<br>
<input type="checkbox" name="img_alt" value="img_alt">
(img_alt)ALT для маленькой картинки<br>
<input type="checkbox" name="rus_tpl" value="rus_tpl">
(rus_tpl){1} - RUS шаблон метаинформации<br>
<input type="checkbox" name="eng_tpl" value="eng_tpl">
(eng_tpl){2} - ENG шаблон метаинформации
        </div>
 
 
        <div id="block3" style="display:none">
<p>
<input type="checkbox" id="hideTextField" onclick="changeVisibility('textFieldBlock2', checked, 'testTextField2')"/>
<span>(desc)Количество (минимум) знаков в описании: </span>
<div id="textFieldBlock2"><input disabled="disabled" id="testTextField2" type="text" name="desc" value="30"></div>
</p>
<input type="checkbox" name="pict" value="pict">
(pict)Большая картинка<br>
<input type="checkbox" name="img" value="img">
(img)Маленькая картинка<br>
<input type="checkbox" name="rus_tpl" value="rus_tpl">
(rus_tpl){1} - RUS шаблон метаинформации<br>
<input type="checkbox" name="eng_tpl" value="eng_tpl">
(eng_tpl){2} - ENG шаблон метаинформации
        </div>
 
        <div id="block4" style="display:none">
<input type="checkbox" name="pict" value="pict">
(pict)Большая картинка<br>
<input type="checkbox" name="img" value="img">
(img)Маленькая картинка<br>
<input type="checkbox" name="rus_tpl" value="rus_tpl">
(rus_tpl){1} - RUS шаблон метаинформации<br>
<input type="checkbox" name="eng_tpl" value="eng_tpl">
(eng_tpl){2} - ENG шаблон метаинформации
<p>
<input type="checkbox" id="hideTextField" onclick="changeVisibility('textFieldBlock2', checked, 'testTextField2')"/>
<span>(desc)Количество (минимум) знаков в описании: </span>
<div id="textFieldBlock2"><input disabled="disabled" id="testTextField2" type="text" name="desc" value="30"></div>
</p>
        </div>
        <div id="block5" style="display:none">
<input type="checkbox" name="pict" value="pict">
(pict)Большая картинка<br>
<input type="checkbox" name="img" value="img">
(img)Маленькая картинка<br>      
<input type="checkbox" name="title" value="title">
(title)<br>
<p>
<input type="checkbox" id="hideTextField" onclick="changeVisibility('textFieldBlock2', checked, 'testTextField2')"/>
<span>(desc)Количество (минимум) знаков в описании: </span>
<div id="textFieldBlock2"><input disabled="disabled" id="testTextField2" type="text" name="desc" value="30"></div>
</p>
        </div>
         
</td>
</tr>
</table>
</p>
<hr size="1">
 
 
<p>
<input type="submit" value="Проверить">
&nbsp;&nbsp;&nbsp;&nbsp;<input type="reset" value="Очистить форму">
</p>
 
</form>

danik.js 09.02.2013 11:45
LOMANI, Нельзя внутрь <p> вкладывать <table>. Посмотрите dom-инспектором - удивитесь какая каша получается

Deff 09.02.2013 13:14
Чуть отформатировал,
<html>
    <head>
      <script type="text/javascript">
    (function(){
        var activeBlock = null;
        window.ShowBlock = function(n) {
            if (activeBlock) {
                activeBlock.style.display = 'none';
                activeBlock.innerHTML = activeBlock.innerHTML;
            }
            activeBlock = document.getElementById('block' + n);
            activeBlock.style.display = 'block';
        };
    })();
</script>
    </head>
    <body>
      <form id="form1" name="form1" method="post" action="/null/seriya_null.php">
        <p>таблица в базе:</p>
        <input onclick="ShowBlock(1)" name="table_db" type="radio" value="catalog">
        Каталог

        <input onclick="ShowBlock(2)" name="table_db" type="radio" value="seriya">
        Серия

        <input onclick="ShowBlock(3)" name="table_db" type="radio" value="seat">
        Стулья

        <input onclick="ShowBlock(4)" name="table_db" type="radio" value="metal">
        Метал

        <input onclick="ShowBlock(5)" name="table_db" type="radio" value="modul">
        Модуль
 

        <hr size="1">
        <p>Параметры поиска:</p>
        <p>
          <table border="0">
            <tbody>
              <tr>
                <td>
                  <div id="block1" style="display:none">
                    <input type="checkbox" name="pict" value="pict">
                    
(pict)Большая картинка
                    <br>
                    <input type="checkbox" name="pict_alt" value="pict_alt">
                    
(pict_alt)ALT для большой картинки
                    <br>
                    <input type="checkbox" name="text" value="text">
                    
(text)Описание категории
                    <br>
                    <input type="checkbox" name="description" value="description">
                    
(description)Описание 2 категории
                    <br>
                    <input type="checkbox" name="keywords" value="keywords">
                    
(keywords)Ключевые слова категори
        
                  </div>
                  <div id="block2" style="display:none">
                    <p>
                      <input type="checkbox" id="hideTextField" onclick="changeVisibility('textFieldBlock2', checked, 'testTextField2')">
                      <span>(desc)Количество (минимум) знаков в описании: </span>
                    </p>
                    <div id="textFieldBlock2">
                      <input disabled="disabled" id="testTextField2" type="text" name="desc" value="30">
                    </div>
                    <p></p>
                    <p>
                      <input type="checkbox" id="hideTextField" onclick="changeVisibility('textFieldBlock1', checked, 'testTextField1')">
                      <span>(tech)Количество (минимум) знаков в техническом описании: </span>
                    </p>
                    <div id="textFieldBlock1">
                      <input disabled="disabled" id="testTextField1" type="text" name="tech" value="30">
                    </div>
                    <p></p>
                    <input type="checkbox" name="pict" value="pict">
                    
(pict)Большая картинка
                    <br>
                    <input type="checkbox" name="img" value="img">
                    
(img)Маленькая картинка
                    <br>
                    <input type="checkbox" name="pict_alt" value="pict_alt">
                    
(pict_alt)ALT для большой картинки
                    <br>
                    <input type="checkbox" name="img_alt" value="img_alt">
                    
(img_alt)ALT для маленькой картинки
                    <br>
                    <input type="checkbox" name="rus_tpl" value="rus_tpl">
                    
(rus_tpl){1} - RUS шаблон метаинформации
                    <br>
                    <input type="checkbox" name="eng_tpl" value="eng_tpl">
                    
(eng_tpl){2} - ENG шаблон метаинформации
        
                  </div>
                  <div id="block3" style="display:none">
                    <p>
                      <input type="checkbox" id="hideTextField" onclick="changeVisibility('textFieldBlock2', checked, 'testTextField2')">
                      <span>(desc)Количество (минимум) знаков в описании: </span>
                    </p>
                    <div id="textFieldBlock2">
                      <input disabled="disabled" id="testTextField2" type="text" name="desc" value="30">
                    </div>
                    <p></p>
                    <input type="checkbox" name="pict" value="pict">
                    
(pict)Большая картинка
                    <br>
                    <input type="checkbox" name="img" value="img">
                    
(img)Маленькая картинка
                    <br>
                    <input type="checkbox" name="rus_tpl" value="rus_tpl">
                    
(rus_tpl){1} - RUS шаблон метаинформации
                    <br>
                    <input type="checkbox" name="eng_tpl" value="eng_tpl">
                    
(eng_tpl){2} - ENG шаблон метаинформации
        
                  </div>
                  <div id="block4" style="display:none">
                    <input type="checkbox" name="pict" value="pict">
                    
(pict)Большая картинка
                    <br>
                    <input type="checkbox" name="img" value="img">
                    
(img)Маленькая картинка
                    <br>
                    <input type="checkbox" name="rus_tpl" value="rus_tpl">
                    
(rus_tpl){1} - RUS шаблон метаинформации
                    <br>
                    <input type="checkbox" name="eng_tpl" value="eng_tpl">
                    
(eng_tpl){2} - ENG шаблон метаинформации

                    <p>
                      <input type="checkbox" id="hideTextField" onclick="changeVisibility('textFieldBlock2', checked, 'testTextField2')">
                      <span>(desc)Количество (минимум) знаков в описании: </span>
                    </p>
                    <div id="textFieldBlock2">
                      <input disabled="disabled" id="testTextField2" type="text" name="desc" value="30">
                    </div>
                    <p></p>
                  </div>
                  <div id="block5" style="display:none">
                    <input type="checkbox" name="pict" value="pict">
                    
(pict)Большая картинка
                    <br>
                    <input type="checkbox" name="img" value="img">
                    
(img)Маленькая картинка
                    <br>
                    <input type="checkbox" name="title" value="title">
                    
(title)
                    <br>
                    <p>
                      <input type="checkbox" id="hideTextField" onclick="changeVisibility('textFieldBlock2', checked, 'testTextField2')">
                      <span>(desc)Количество (минимум) знаков в описании: </span>
                    </p>
                    <div id="textFieldBlock2">
                      <input disabled="disabled" id="testTextField2" type="text" name="desc" value="30">
                    </div>
                    <p></p>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </p>
        <hr size="1">
        <p>
          <input type="submit" value="Проверить">
          <input type="reset" value="Очистить форму">
        </p>
      </form>
    </body>
  </html>
Вообще то лучше не стирать поля, поскольку чел может настраиваться и выбирать в разных Вариантах и не быть определившимся до конца перебора.
Отправка запроса, по идее, должна помещать в в форму только выбранную последнюю активную вкладку(изначально форму делать пустой, точнее создавать её по субмит в скрытом виде( display:none) и помещать туда активную вкладку с элементами

LOMANI 09.02.2013 14:07
по скрытию и отключению text полей
<script type="text/javascript" language="JavaScript">
function changeVisibility(divId, visible, divId2){
document.getElementById(divId).style.display = visible ? "block": "none";
document.getElementById(divId2).disabled = visible ? false : true; 
}
</script>


Часовой пояс GMT +3, время: 15:43.