Question

我有两个包含<h1>标记和复选框的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

＆＃13;

$(':checkbox').change(function(){

if($(this).is(':checked')){

console.log($(this).prev('h1').text())

}

})

＆＃13;

<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>

＆＃13;

使用prev（＆＃39; h1＆＃39;）获取已选中元素的h1

Answer 2

您需要change而不是click作为活动。在您的情况下，您可以使用prev()，因为元素就在它之前。

＆＃13;

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

＆＃13;

<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>

＆＃13;

如果您只想value只要input checked，那么您也可以在if内使用$(".send input[type=checkbox]").change(function() { if( $(this).prop("checked") ) { console.log($(this).prev().text()); } })：

＆＃13;

<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>

＆＃13;

{{1}}

＆＃13;

Answer 3

您可以使用siblings()功能。

<option>

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());
        }
    });
});

如何在该div中单击复选框时获取标题的值？

5 个答案: