更改下一個div顯示 - 輸入值

Question

我試圖根據複選框隱藏/顯示div，但無法使其工作。我看過很多示例，教程，但無法使其適應我的情況。似乎有很多方法可以做到這一點。

這裏是我的代碼部分：

<div id="layer-control"> 
    <p>Selectionnez les couches pour les afficher sur la carte.</p> 
    <div id="reciprocite"> 
     <nav id='filter-group-reci' class='filter-group-reci'></nav> 
     <div id='recipro-polygon' class='legend' style="display:none;">> 
      <div><span style='background-color: #e6d94c' 'opacity:0.45'></span>GPV (adhérent URNE)</div> 
      <div><span style='background-color: #010492' 'opacity:0.45'></span>GPRMV (adhérent URNE)</div> 
      <div><span style='background-color: #179201' 'opacity:0.45'></span>EH3VV (adhérent URNE)</div> 
      <div><span style='background-color: #920104' 'opacity:0.45'></span>GAP </div> 
      <div><span style='background-color: #404040' 'opacity:0.45' ></span>AAPPMA Non réciprocitaires</div> 
     </div> 
    </div> 
    <div id="rivieres"> 
     <nav id='filter-group-rivieres' class='filter-group-rivieres'></nav> 
     <div id='rivieres-line' class='legend'> 
      <div><span style="background-color: #0400ff; height: 4px"></span>1ère Catégorie DPF</div> 
      <div><span style="background-color: #6ea5f2; height: 2px"></span>1ère Catégorie</div> 
      <div><span style="background-color: #c110b6; height: 4px"></span>2ème Catégorie DPF</div> 
      <div><span style="background-color: #e48ff5; height: 2px"></span>2ème Catégorie</div> 
      <span><em>*Domaine Public Fluvial</em></span> 
     </div> 
    </div> 

var layers = document.getElementById('filter-group-reci'); 
var layers2 = document.getElementById('filter-group-rivieres'); 
var layers3 = document.getElementById('filter-group-parcours'); 

toggleLayer('Réciprocité', ['reciprocite-gpv', 'reciprocite-gap','reciprocite-gprmv','reciprocite-non-recipro','reciprocite-eh3vv']); 
toggleLayer2('Catégories Piscicoles',['cours-deau-large-1ere-dpf', 'cours-deau-m-1ere-dpf','cours-deau-s-1ere-dpf','cours-deau-large-2eme-dpf', 'cours-deau-m-2eme-dpf','cours-deau-s-2eme-dpf','cours-deau-large-1ere', 'cours-deau-m-1ere','cours-deau-s-1ere','cours-deau-large-2eme', 'cours-deau-m-2eme','cours-deau-s-2eme']) 

//Bouton réciprocité 
function toggleLayer(name,ids) { 
    var input = document.createElement('input'); 
      input.type = 'checkbox'; 
      input.id = ids; 
      input.checked = false; 
      layers.appendChild(input); 
    var label = document.createElement('label'); 
     label.setAttribute('for', ids); 
      label.textContent = name; 
      layers.appendChild(label); 

     input.onclick = function (e) { 
     e.stopPropagation(); 
     for (layers in ids){ 
      var visibility = map.getLayoutProperty(ids[layers], 'visibility'); 
      if (visibility === 'visible') { 
       map.setLayoutProperty(ids[layers], 'visibility', 'none'); 
       this.className = ''; 
      } else { 
       this.className = 'active'; 
       map.setLayoutProperty(ids[layers], 'visibility', 'visible'); 
      } 
     } 

    }; 

} 

//Bouton Catégorie piscicoles 
function toggleLayer2(name,ids) { 
    var input = document.createElement('input'); 
      input.type = 'checkbox'; 
      input.id = ids; 
      input.checked = true; 
      layers2.appendChild(input); 
    var label = document.createElement('label'); 
     label.setAttribute('for', ids); 
      label.textContent = name; 
      layers2.appendChild(label); 

     input.onclick = function (e) { 
     e.stopPropagation(); 
     for (layers in ids){ 
      var visibility = map.getLayoutProperty(ids[layers], 'visibility'); 
      if (visibility === 'visible') { 
       map.setLayoutProperty(ids[layers], 'visibility', 'none'); 
       this.className = ''; 
      } else { 
       this.className = 'active'; 
       map.setLayoutProperty(ids[layers], 'visibility', 'visible'); 
      } 
      } 

     }; 

    } 

首先，我讀過，有可能使用CSS，用 「輸入：檢查〜」 我嘗試：

.legend { 
    display:none; 
} 
#reciprocite-gpv,reciprocite-gap,reciprocite-gprmv,reciprocite-non-recipro,reciprocite-eh3vv input:checked ~ .legend { 
    display: block; 
} 

沒有工作，也許我引起了語法錯誤？

然後我試圖使用JavaScript（或者是它的JQuery？）

$(function(){ 
     $("input[type=checkbox]").change(function(){ 
      if ($(this).is(":checked")){ 
       $(this).next("div").css("display","block"); 
      } else { 
       $(this).next("div").css("display","none"); 
      } 
     }); 

     $("input[type=checkbox]").change(); 

    }); 

誰能給我一個提示如何做到這一點？

Answer 1

您可以使用onclick來創建切換功能並檢查複選框是否被選中。根據結果​​，您可以更改div的文字。請參閱plunker。在這裏我使用普通的JavaScript。在使用jQuery時，您還可以使用div.html("your text")來更改文本。