скрытие div на основе снятия флажка

У меня есть несколько флажков в форме. Нажав на эти флажки, я показываю раздел div. Но если я сниму хотя бы один флажок, эта секция div будет скрыта. Как убедиться, что раздел div скрыт, только если все флажки сняты. Грубым способом может быть написать мой собственный метод «display», который будет проверять, не сняты ли все флажки, а затем скрыть раздел div. Любое более легкое решение?скрытие div на основе снятия флажка

источник

2010-07-20 yogsma

следующий код покажет div, если один или несколько флажков были отмечены:

JQuery

Версия 1:

$("input[name='mycheckboxes']").change(function() { 
    $("#showme").toggle($("input[name='mycheckboxes']:checked").length>0); 
});

Version 2 (более эффективный):

var MyCheckboxes=$("input[name='mycheckboxes']"); 

MyCheckboxes.change(function() { 
    $("#showme").toggle(MyCheckboxes.is(":checked")); 
});

HTML

<input type="checkbox" name="mycheckboxes" /> 
<input type="checkbox" name="mycheckboxes" /> 
<input type="checkbox" name="mycheckboxes" /> 
<input type="checkbox" name="mycheckboxes" /> 

<div id="showme" style="display: none">Show me</div>

Code in action (Version 2).

--- Различные Checkbox Названия Версия ---

Для различных названных флажков, завернуть их в DIV с идентификатором. Например.

JQuery

var MyCheckboxes=$("#checkboxgroup :checkbox"); 

MyCheckboxes.change(function() { 
    $("#showme").toggle(MyCheckboxes.is(":checked")); 
});

HTML

<div id="checkboxgroup"> 
    <input type="checkbox" name="mycheckbox1" /> 
    <input type="checkbox" name="mycheckbox2" /> 
    <input type="checkbox" name="mycheckbox3" /> 
    <input type="checkbox" name="mycheckbox4" /> 
</div> 

<div id="showme" style="display: none">Show me</div>

Это code in action.

источник

2010-07-20 18:05:55

toggle - приятное прикосновение, но если вы можете давать классы своим ячейкам и кэшировать свой запрос, он намного эффективнее, чем запрос по имени (не говоря уже о том, что им могут понадобиться разные имена, иначе они, вероятно, будут радио) –

Нет причин использовать классы для этого. Здесь используется общий селектор. –

Версия 2 - это кешированная версия. Спасибо за предложение. –

Не совсем, у Вас должен быть для этого ... Или, может быть ... Скажем:

<html> 
<head> 
<style type="text/css"> 
    #input_container > input + input + input + div {display:none} 
    #input_container > input:checked + input:checked + input:checked + div {display:block} 
</style> 
</head> 
<div id="input_container"> 
    <input type="checkbox">blah1 
    <input type="checkbox">blah2 
    <input type="checkbox">blah3 
    <div>To show/hide</div> 
</div> 
</body> 
</html>

источник

2010-07-20 17:53:50

Я использую только javascript !! – yogsma

Это еще проще, это просто простой CSS/HTML, хотя, по общему признанию, я не тестировал это. –

Просто протестировал его, он работает (в FF). –

HTML:

<input type="checkbox" class="group" name="check1"> 
<input type="checkbox" class="group" name="check2"> 
<input type="checkbox" class="group" name="check3"> 
<input type="checkbox" class="group" name="check4">

JQuery:

$(function() { 
    var $checks = $('input:checkbox.group'); 
    $checks.click(function() { 
     if($checks.filter(':checked').length == 0) { 
      $('#div').hide(); 
     } else { 
      $('#div').show(); 
     } 
    }); 
});

источник

2010-07-20 17:55:39

Вероятно, лучше всего использовать обработчик change(), а не щелчок. –

Является ли jQuery предположением сейчас? Потому что это не упоминается в исходном вопросе ... – Bob

Ха, жертва моих предположений. Я могу поклясться, что видел ярлык jQuery. В любом случае, мне не хочется пытаться собрать пример того, что потребуется, чтобы получить это с помощью простого javascript, поэтому я просто оставлю это здесь, если он использует/хочет использовать jQuery. –

Я бы создать функцию, которая использует переменную, которая отслеживает количество флажков проверяемых:

var numberOfChecks = 0; 
function display(ev) { 
    var e = ev||window.event; 
    if (this.checked) { 
    numberOfChecks++; 
    } else { 
    numberOfChecks--; 
    } 
    if (!numberOfChecks) { 
    //hide div code 
    } else { 
    //display div code 
    } 
}

Используйте эту функцию для каждого события onClick для каждого флажка. В идеальном мире это будет сделано внутри некоторой функции инициализации, так что numberOfChecks и display не находятся в глобальном пространстве имен.

источник

2010-07-20 18:25:39 Bob

Plain Javascript:

HTML

<div id="checkboxes"> 
<input type="checkbox" name="check1"> 
<input type="checkbox" name="check2"> 
<input type="checkbox" name="check3"> 
<input type="checkbox" name="check4"> 
</div> 

<div id="hiddendiv"><!-- more stuff --></div>

Javascript

(function() { //Create clousre to hide the checked variable 
var checked = 0; 
var inputs = document.getElementById('checkboxes').getElementsByTagName('input'); 
for (var i=0, l=inputs.length; i<l; i++) { 
    if (inputs[i].type == 'checkbox') { 
    if (inputs[i].checked) checked++; //Count checkboxes that might be checked on page load 
    inputs[i].onchange = function() { 
     checked += this.checked ? 1 : -1; 

     var hiddendiv = document.getElementById('hiddendiv'); 
     if (!checked) hiddendiv.style.display = "none"; 
     else hiddendiv.style.display = ""; 
    }; 
    } 
} 
}());

Другой вариант просто перебирать каждый флажок каждый раз, когда change события является скорее, чем полагаться на подсчет, что, вероятно, более подвержено ошибкам. Очевидно, jQuery более лаконичен, но небольшая многословность никогда никому не повредит.

источник

2010-07-20 18:31:38 MooGoo

скрытие div на основе снятия флажка

ответ

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