用jquery获得选择的checkbox的文字值

Tizzy_Joel

于 2012-02-03 14:28:07 发布

阅读量8.2k

点赞数 1

分类专栏： javascript 文章标签： jquery input function 音乐

本文链接：https://blog.youkuaiyun.com/Tizzy_Joel/article/details/7231322

版权

javascript 专栏收录该内容

25 篇文章

订阅专栏

博客内容介绍了如何使用jQuery获取被选中checkbox的文字值，指出常规方法如.text()和.html()可能无法得到预期结果，并提到.value属性通常返回'on'，而实际需要的是checkbox旁边的文本。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<body>
   <input type='checkbox' name='likes' value='music'></input><span>音乐</span>
   <input type='checkbox' name='likes'></input><span>美术</span>
   <input type='checkbox' name='likes'></input><span>信息技术</span>
   <input type='checkbox' name='likes'></input><span>运动</span>
   <input type='radio' name='other'><span>单选</span></input>
<script src="js/jquery-1.6.4.min.js"></script>
<script>
   var hobbies;
   $("input[name=likes]").change(function(){
       hobbies='';
       //console.log($(this)[0].checked);
       $("input:checked[name=likes]").each(function(index){
           console.log($(this).next('span'));
           if($(this)[0].checked){
               hobbies+=$(this).next('span').text();
               hobbies+=",";
           }
       });
       console.log(hobbies.slice(0,-1));
   });
</script>

若把放里，用$.fn.children('span')(为空)并不能获得span。

ps:用jquery可以获得checkbox的value属性的值（默认为on, val()），其text(),htm()获得的值都是空字符串。