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

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> 

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> 

注意：请相应更改值。