Показать/скрыть div если флажок установлен

Мне нужна страница с флажками и видимым div, если в minumum 1 проверяется.Показать/скрыть div если флажок установлен

Здесь у меня есть страница, которая, если я установил флажок, отобразит div. Все в порядке и работает правильно.

Когда я проверяю 3 флажка и снимите флажок 1, div отсутствует, когда я снова проверю флажок, div покажет - это неверно.

Как мне изменить скрипт, чтобы показывать alltime div, если флажок установлен как минимум 1, без этого «прыжка»?

<html> 
<head> 
<title>CB Hide/Show</title> 
<script type="text/javascript"> 
<!-- 
function showMe (it, box) { 
    var vis = (box.checked) ? "block" : "none"; 
    document.getElementById(it).style.display = vis; 
} 
//--> 
</script> 
</head> 
<body> 
<h3 align="center"> This JavaScript shows how to hide divisions </h3> 

<div id="div1" style="display:none"> 
<table border=1 id="t1"> 
<tr> 
<td>i am here!</td> 
</tr> 
</table> 
</div> 

<form> 
<input type="checkbox" name="c1" onclick="showMe('div1', this)">Show Hide Checkbox 
<input type="checkbox" name="c1" onclick="showMe('div1', this)">Show Hide Checkbox 
<input type="checkbox" name="c1" onclick="showMe('div1', this)">Show Hide Checkbox 
<input type="checkbox" name="c1" onclick="showMe('div1', this)">Show Hide Checkbox 
<input type="checkbox" name="c1" onclick="showMe('div1', this)">Show Hide Checkbox 
<input type="checkbox" name="c1" onclick="showMe('div1', this)">Show Hide Checkbox 
<input type="checkbox" name="c1" onclick="showMe('div1', this)">Show Hide Checkbox 
<input type="checkbox" name="c1" onclick="showMe('div1', this)">Show Hide Checkbox 
<input type="checkbox" name="c1" onclick="showMe('div1', this)">Show Hide Checkbox 
<input type="checkbox" name="c1" onclick="showMe('div1', this)">Show Hide Checkbox 
<input type="checkbox" name="c1" onclick="showMe('div1', this)">Show Hide Checkbox 
<input type="checkbox" name="c1" onclick="showMe('div1', this)">Show Hide Checkbox 



</form> 
</body> 
</html>

источник

2013-08-24 user2421781

Почему тег [tag: java]? Ваш вопрос, похоже, не имеет никакого отношения к программированию на Java. Я удалю этот тег, но если я ошибаюсь, укажите, почему. –

было бы здорово, если бы вы могли создать скрипт js? – iJade

в сторону: _table_ пугает меня, и вы должны использовать такие метки, как '' ' Показать скрытый флажок' '' – Andy

изменения в поля ввода, как

<input type="checkbox" name="c1" onclick="showMe('div1')">Show Hide Checkbox 
<input type="checkbox" name="c1" onclick="showMe('div1')">Show Hide Checkbox 
<input type="checkbox" name="c1" onclick="showMe('div1')">Show Hide Checkbox 
<input type="checkbox" name="c1" onclick="showMe('div1')">Show Hide Checkbox

и JS кода,

function showMe (box) { 

    var chboxs = document.getElementsByName("c1"); 
    var vis = "none"; 
    for(var i=0;i<chboxs.length;i++) { 
     if(chboxs[i].checked){ 
     vis = "block"; 
      break; 
     } 
    } 
    document.getElementById(box).style.display = vis; 


}

вот demo fiddle

источник

2013-08-24 17:22:09 mithunsatheesh

huh !? HOw может ли это быть ответом, когда вопрос задавался вопросом, как показать/скрыть элемент DIV, а не CheckBox !? – Fandango68

@ Fandango68 он просматривает флажки, чтобы определить желаемую видимость. Последняя строка получает элемент div по его идентификатору, а затем устанавливает его отображение на заранее определенную видимость. Имя переменной (поле) просто вводит в заблуждение, потому что, если вы посмотрите на аргумент, переданный функции, поле действительно заканчивается значением «div1» :) – wmebane

@wmebane для уточнения – Fandango68

Вы должны всегда учитывать состояние всех флажков!

Вы можете увеличить или уменьшить число при проверке или снятии флажка, но представьте, что сайт загружается с тремя из них.

Таким образом, вы всегда должны проверить все из них:

<script type="text/javascript"> 
<!-- 
function showMe (it, box) { 
    // consider all checkboxes with same name 
    var checked = amountChecked(box.name); 

    var vis = (checked >= 3) ? "block" : "none"; 
    document.getElementById(it).style.display = vis; 
} 

function amountChecked(name) { 
    var all = document.getElementsByName(name); 

    // count checked 
    var result = 0; 
    all.forEach(function(el) { 
    if (el.checked) result++; 
    }); 

    return result; 
} 
//--> 
</script>

источник

2013-08-24 17:18:48 Andy

<input type="checkbox" name="check1" value="checkbox" onchange="showMe('div1')" /> checkbox 

<div id="div1" style="display:none;">NOTICE</div> 

    <script type="text/javascript"> 
<!-- 
    function showMe (box) { 
    var chboxs = document.getElementById("div1").style.display; 
    var vis = "none"; 
     if(chboxs=="none"){ 
     vis = "block"; } 
     if(chboxs=="block"){ 
     vis = "none"; } 
    document.getElementById(box).style.display = vis; 
} 
    //--> 
</script>

источник

2017-04-13 16:37:19 peter

Добро пожаловать в Stack, Peter! Пожалуйста, добавьте некоторое объяснение в свои ответы, чтобы аферы могли понять, что вы делаете. –

Показать/скрыть div если флажок установлен

ответ

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