javascript - 如何通过多种方式获取 CheckBox 的 Text 和 Value？

Question

我已经阅读了另一篇文章，但仍然没有解决。我有生成的复选框:

$('#sel_div').append("<div style='margin-bottom:4px;margin-right:5px;float:left;width:80px;'><input type='checkbox' name=loc["+loc_id+"][] style='margin:2px;' value='"+myvalue+"' onClick='handler(this)'>"+description+"</div>");

问题是，如何获取复选框的值(myvalue)和复选框的文本(描述)？

我必须做的:

function handler(checkbox){
    var checkedValue = checkbox.value;
    alert(checkedValue);
    alert($('input[type=checkbox]:checked').next().val());
    alert($('input[type=checkbox]:checked').next().text());
}

结果:

checkedValue 得到正确的值，但另一个警报显示为空白。

谁能解释一下代码有什么问题？

谢谢

Answer 1

您可以使用 closest() 向上到父 div 然后获取文本:

$(checkbox).closest('div').text();

由于您使用的是 jQuery，我建议在您的 JS 代码中添加事件监听器:

$('body').on('change', 'input[type=checkbox]', function(){
    if( $(this).is(':checked') )
    {
         console.log($(this).val());
         console.log($(this).closest('div').text());
    }
})

希望这对您有所帮助。

var myvalue = 'myvalue';
var loc_id = 'loc_id';
var description = 'description';

$('#sel_div').append("<div style='margin-bottom:4px;margin-right:5px;float:left;width:80px;'><input type='checkbox' name=loc["+loc_id+"][] style='margin:2px;' value='"+myvalue+"'>"+description+"</div>");


$('body').on('change', 'input[type=checkbox]', function(){
  if( $(this).is(':checked') )
  {
    console.log($(this).val());
    console.log($(this).closest('div').text());
  }
})

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

<div id='sel_div'></div>

多复选框代码段:

var myvalue = 'myvalue';
var loc_id = 'loc_id';
var description = 'description';

$('#sel_div').append("<div style='margin-bottom:4px;margin-right:5px;float:left;width:80px;'><input type='checkbox' name=loc[1][] style='margin:2px;' value='value_1'>description_1</div>");

$('#sel_div').append("<div style='margin-bottom:4px;margin-right:5px;float:left;width:80px;'><input type='checkbox' name=loc[2][] style='margin:2px;' value='value_2'>description_2</div>");

$('#sel_div').append("<div style='margin-bottom:4px;margin-right:5px;float:left;width:80px;'><input type='checkbox' name=loc[3][] style='margin:2px;' value='value_3'>description_3</div>");

$('body').on('change', 'input[type=checkbox]', function(){
  if( $(this).is(':checked') )
  {
    console.log($(this).val());
    console.log($(this).closest('div').text());
  }
})

div{
  padding: 10px;
}

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

<div id='sel_div'></div>