次の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")を使用してテキストを変更することもできます。