我有div的复选框我需要当我点击它获得div的内部文本我点击它只有

我有div的复选框我需要当我点击它获取div的内部文本我点击它只有我有div的复选框我需要当我点击它获得div的内部文本我点击它只有

 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">           
 
    <input class='checkbox__toggle' type='checkbox'> 
 
    <div class="serveTitle">title 1</div> 
 
</div> 
 
<div class="checkdivwrp">           
 
    <input class='checkbox__toggle' type='checkbox'> 
 
    <div class="serveTitle">title 2</div> 
 
</div> 
 
<div class="checkdivwrp">           
 
    <input class='checkbox__toggle' type='checkbox'> 
 
    <div class="serveTitle">title 3</div> 
 
</div>

来源

2017-08-13 Kareem Nagy

您需要使用on('click'如果复选框被选中或不检查。如果被选中，使用$(this).parent().find('.serveTitle').text()得到内部文本：

$(".checkbox__toggle").on('click', function() { 
 
    if ($(this).is(':checked')) 
 
    console.log($(this).parent().find('.serveTitle').text()); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="checkdivwrp"> 
 
    <input class='checkbox__toggle' type='checkbox'> 
 
    <div class="serveTitle">title 1</div> 
 
</div> 
 
<div class="checkdivwrp"> 
 
    <input class='checkbox__toggle' type='checkbox'> 
 
    <div class="serveTitle">title 2</div> 
 
</div> 
 
<div class="checkdivwrp"> 
 
    <input class='checkbox__toggle' type='checkbox'> 
 
    <div class="serveTitle">title 3</div> 
 
</div>

来源

2017-08-13 13:25:32

在JavaScript中（现在用的指标，以避免父母和兄弟姐妹的混乱）：

var serviceChecked = document.querySelectorAll('.checkbox__toggle'); 
 
var serviceTitle = document.querySelectorAll('.serveTitle'); 
 
serviceChecked.forEach(function(service, index){ 
 
    service.addEventListener('click',function(){ 
 
     alert(serviceTitle[index].innerText); 
 
    }); 
 
});

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

来源

2017-08-13 13:32:33

nextSibling可以是任何东西。理想情况下，我们应该按照课程名称去。像'''var child = this.parentElement.getElementsByClassName（“serveTitle”）[0];'' – Ashvin777

在他的代码中，它不是任何东西，它是serveTitle，总是serveTitle！ –

尝试使用纯Javascript。你不需要任何外部库。

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

 

 

 
serviceChecked.forEach(function(listItem) { 
 
    listItem.addEventListener('click', function(e) { 
 
    
 
    var child = this.parentElement.getElementsByClassName("serveTitle")[0]; 
 
     
 
    alert(child.innerHTML) 
 
    }); 
 
});

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

来源

2017-08-13 13:32:53 Ashvin777

它只有在serveTitle类是parentElement的时候才起作用这个类在我的真实代码中包含div div –

的div div这个基本上是指单击元素上下文中的“checkdivwrp”。根据您的意见，它不是“serveTitle”元素。上述解决方案的解释 - 只需转到单击元素的父级，然后搜索父级体内的元素。这是一个闲置的解决方案。 – Ashvin777

编辑：nextSibiling如果它紧跟目标元素，如果你不知道它的确切位置，你可以做你必须使用电子下文

搜索。目标以获得实际点击的目标，然后检查其父级的子级的名称：

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

serviceChecked.forEach(function(listItem){ 
    listItem.addEventListener('click', function(e){ 
    var parent = e.target.parentNode; //you can use this instead of e.target 
    for (var i = 0; i < parent.childNodes.length; i++) { 
     if (parent.childNodes[i].className == "serveTitle") { 
     alert(parent.childNodes[i].innerText) 
     break; 
     }   
    } 
    }); 
})

来源

2017-08-13 13:34:12 silviajoy

我有div的复选框我需要当我点击它获得div的内部文本我点击它只有

回答

相关问题