div内でチェックボックスがクリックされたときに見出しの値を取得する方法は？

Question

<h1>タグとチェックボックスを含む2つのdivがあります。特定のdivのチェックボックスをクリックすると、見出しの値を取得したいと思います。

<div class="send"> 
    <h1>hi</h1> 
    <input type="checkbox" name="checkbox"/> 
</div> 
<div class="send"> 
    <h1>welcome</h1> 
    <input type="checkbox" name="checkbox"/> 
</div> 

特定のチェックボックスをJavaScriptの特定のdiv内でクリックすると、特定の見出し値を取得する方法はありますか？誰か助けてくれますか？

Answer 1

$(':checkbox').change(function(){ 
 

 
if($(this).is(':checked')){ 
 

 
console.log($(this).prev('h1').text()) 
 

 
} 
 

 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="send"> 
 
    <h1>hi</h1> 
 
    <input type="checkbox" name="checkbox"/> 
 
</div> 
 
<div class="send"> 
 
    <h1>welcome</h1> 
 
    <input type="checkbox" name="checkbox"/> 
 
</div>

1. あなたがイベントとしてchangeなくclickが必要になります確認要素

Answer 2

のH1を取得するために使用する前（ 'H1'）。あなたの場合は、要素がその直前にあるので、prev()を使用することができます。

$(".send input[type=checkbox]").change(function() { 
 
    console.log($(this).prev().text()); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="send"> 
 
    <h1>hi</h1> 
 
    <input type="checkbox" name="checkbox" /> 
 
</div> 
 
<div class="send"> 
 
    <h1>welcome</h1> 
 
    <input type="checkbox" name="checkbox" /> 
 
</div>

inputはあなたがあまりにも内部のifを使用することができますcheckedある時はいつでもあなただけvalueをしたい場合：

$(".send input[type=checkbox]").change(function() { 
 
    if($(this).prop("checked")) { 
 
     console.log($(this).prev().text()); 
 
    } 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="send"> 
 
    <h1>hi</h1> 
 
    <input type="checkbox" name="checkbox" /> 
 
</div> 
 
<div class="send"> 
 
    <h1>welcome</h1> 
 
    <input type="checkbox" name="checkbox" /> 
 
</div>

Answer 3

あなたはを使用することができます機能。

$("input:checkbox[name='checkbox']").click(function{ 
     if($(this).is(':checked')){ 
     var h1tagText = $(this).siblings("h1").text(); 
    } 
    }); 

Answer 4

ピュアJavascriptのソリューション：

var inputs = document.querySelectorAll(".send input[type=checkbox]"); 

for(var i = 0; i<inputs.length; i++){ 
    inputs[i].addEventListner("change",function(e){ 
    var heading = e.target.parentElement.querySelector("h2").innerHTML; 
    //do something with heading 
    }); 
} 

Answer 5

私はあなたがチェックボックスがオフにチェックしていないだけで取得した値を取得したいということだと思います。
これはコードです：

$(document).ready(function(){ 
    $("input").click(function(){ 
     if($(this).is(":checked")){ 
      alert($(this).parent().find("h1").html()); 
     } 
    }); 
});