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

希望这有帮助。

＆＃13;

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

＆＃13;

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

＆＃13;

多个复选框代码段

＆＃13;

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

＆＃13;

div{
  padding: 10px;
}

＆＃13;

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

＆＃13;

Answer 2

如果您为此复选框指定label，则会更加轻松：

var text    = $('label[for=myCheckBox]').text();
var another = $('#myCheckBox').next('label').text();
console.log(text);
console.log(another);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="chk" id="myCheckBox">
<label for="myCheckBox">Test Run</label>

注意：请相应更改值。

如何通过多种方式获取CheckBox的文本和值？

2 个答案: