チェックボックスを選択するときにdivの内側のテキストを選択

Question

チェックボックスをクリックすると、div内のすべてのタイトルが警告されます。私がクリックするdiv内のタイトルに警告する必要があるだけです。私は、[T] .innerHTML

Answer 1

serviceTitleを使用してみてくださいいずれかのJavaScriptコードで私を助けることができることを願っていますイベントハンドラから、取得する親のcheckdivwrpから子要素を取得する serveTitleのように、currentElementにアクセスできます。

var serviceChecked = document.querySelectorAll('.checkbox__toggle'); 
 
     var serviceTitle = document.querySelectorAll('.serveTitle'); 
 

 
     serviceChecked.forEach(function(listItem){ 
 
      listItem.addEventListener('click', function(e){ 
 
       var parent = e.currentTarget.parentElement.parentElement; //get to checkwrp -> checkdivwrp 
 
       var titleElement = parent.getElementsByClassName('serveTitle')[0]; //get to class serveTitle 
 
       alert(titleElement.innerHTML); 
 
      }); 
 
     });

<div class="checkdivwrp"> 
 
    <div class="checkwrp"> 
 
    <input class='checkbox__toggle' type='checkbox'> 
 
    </div>  
 
    <div class="titlewrp"> 
 
     <div class="serveTitle">title 1</div> 
 
    </div> 
 
</div> 
 
<div class="checkdivwrp"> 
 
    <div class="checkwrp"> 
 
    <input class='checkbox__toggle' type='checkbox'> 
 
    </div>  
 
    <div class="titlewrp"> 
 
     <div class="serveTitle">title 2</div> 
 
    </div> 
 
</div> 
 
<div class="checkdivwrp"> 
 
    <div class="checkwrp"> 
 
    <input class='checkbox__toggle' type='checkbox'> 
 
    </div>  
 
    <div class="titlewrp"> 
 
     <div class="serveTitle">title 3</div> 
 
    </div> 
 
</div>

Answer 2

あなたは、このためのループを必要としない（ないjqueryの）

var serviceChecked = document.querySelectorAll('.checkbox__toggle'); 
 
var serviceTitle = document.querySelectorAll('.serveTitle'); 
 

 
serviceChecked.forEach(function(listItem) { 
 
    listItem.addEventListener('click', function(e) { 
 
    for (var t = 0; t < serviceTitle.length; t++) { 
 
     alert(serviceTitle[t].innerText); 
 
    } 
 
    }); 
 
});

<div class="checkdivwrp"> 
 
    <div class="checkwrp"> 
 
    <input class='checkbox__toggle' type='checkbox'> 
 
    </div> 
 
    <div class="titlewrp"> 
 
    <div class="serveTitle">title 1</div> 
 
    </div> 
 
</div> 
 
<div class="checkdivwrp"> 
 
    <div class="checkwrp"> 
 
    <input class='checkbox__toggle' type='checkbox'> 
 
    </div> 
 
    <div class="titlewrp"> 
 
    <div class="serveTitle">title 2</div> 
 
    </div> 
 
</div> 
 
<div class="checkdivwrp"> 
 
    <div class="checkwrp"> 
 
    <input class='checkbox__toggle' type='checkbox'> 
 
    </div> 
 
    <div class="titlewrp"> 
 
    <div class="serveTitle">title 3</div> 
 
    </div> 
 
</div>

Answer 3

代わりのすべてserveTitle Sををループ、あなたがこれを使用して対応するserveTitleを選択することができます。

e.target.parentElement // select 'checkwrp' 
     .parentElement // select 'checkdivwrp' 
     .querySelector('.titlewrp > .serveTitle').textContent 

はデモは、以下を参照してください：

var serviceChecked = document.querySelectorAll('.checkbox__toggle'); 
 
serviceChecked.forEach(function(listItem) { 
 
    listItem.addEventListener('click', function(e) { 
 
    alert(e.target.parentElement 
 
        .parentElement 
 
        .querySelector('.titlewrp > .serveTitle').textContent); 
 
    }); 
 
});

<div class="checkdivwrp"> 
 
    <div class="checkwrp"> 
 
    <input class='checkbox__toggle' type='checkbox'> 
 
    </div> 
 
    <div class="titlewrp"> 
 
    <div class="serveTitle">title 1</div> 
 
    </div> 
 
</div> 
 
<div class="checkdivwrp"> 
 
    <div class="checkwrp"> 
 
    <input class='checkbox__toggle' type='checkbox'> 
 
    </div> 
 
    <div class="titlewrp"> 
 
    <div class="serveTitle">title 2</div> 
 
    </div> 
 
</div> 
 
<div class="checkdivwrp"> 
 
    <div class="checkwrp"> 
 
    <input class='checkbox__toggle' type='checkbox'> 
 
    </div> 
 
    <div class="titlewrp"> 
 
    <div class="serveTitle">title 3</div> 
 
    </div> 
 
</div>