jQuery获取选中复选框的标签答案

【问题标题】：jQuery getting label for checked checkboxjQuery获取选中复选框的标签
【发布时间】：2013-04-08 05:41:36
【问题描述】：

在下面的代码中，当我选中“Mexico”时，我不断将“MexicoMexico”作为标签文本返回。对于所有其他字段，我没有得到这个重复的结果，它只适用于这个字段。该问题在第一次分配 countryvalues[i] 后立即发生，我不明白为什么。

<div id="country">
....
   <li><input type="checkbox" name="country" value="mexico" class="checkbox">
   <label for="mexico">Mexico</label></input></li>
</div>

countryvalues = $('#country input:checkbox:checked').map(function() {
    return this.value;
}).get(); 
for (var i=0; i<countryvalues.length; i++)
    {
        countryvalues[i] = $("label[for='" + countryvalues[i] + "']").text();
        countryvalues[i] = countryvalues[i].split(' ').join('%20');
        fields = fields + "coveraa!";
        url = url + countryvalues[i] + "!";
    }

【问题讨论】：

我觉得很好jsfiddle.net/j2X7Q/1
其他国家也有</input>，或者他们的输入标签是否用<input ... />自封闭？据我所知，关闭 </input> 在所有 Doctype 下都是不合法的，并且可能会在不同的浏览器中产生不同/未知的行为。
@Beetroot-Beetroot 感谢提及，不幸的是它没有解决双墨西哥问题。
alert(countryvalues).length。你得到了什么价值？
@Beetroot-Beetroot 1！

标签： jquery html checkbox

【解决方案1】：

Sarina，我只能建议您尝试在 .map() 回调中获取您要查找的字符串，而不是使用 for(...){...} 再次循环。

var countryvalues = $('#country input:checkbox:checked').map(function() {
    return $(this).next("label").text().split(' ').join('%20');
}).get();

确保清除 HTML 中的所有 </input> 实例并且输入元素是自关闭的 <input ... />。

【讨论】：

我傻了，我没有意识到墨西哥出现在另一个 div 中，这样做可以解决问题
啊，必须有一个解释。现在我们都可以戴上帽子跳舞来庆祝了:)

【解决方案2】：

如果您有多个 li 。那么您可以使用此代码获取选中的checkbox 标签文本。

JS FIDLLE LINK

<div id="country">
....
   <li><input type="checkbox" name="country" value="mexico" class="checkbox">
   <label for="mexico">Mexico</label></input>
    </li>
    <li><input type="checkbox" name="country" value="mexico" class="checkbox">
   <label for="mexico">Canada</label></input>
    </li>
</div>


$(document).ready(function(){
    $('#country li input:checkbox').change(
        function() {
            //alert('HI');
            alert($(this).next('label').text());
                   }
    );
});

【讨论】：

【解决方案3】：

查看下面的示例，您将了解如何在 jQuery 中获取复选框标签的脚本

<html>
 <body>
     <ul>
         <li>
             <input type="checkbox" name="mouse" value="1" id="mouse"  /><label for="mouse">Mouse</label>
            </li>
            <li>
             <input type="checkbox" name="keyboard" value="1" id="keyboard"  /><label for="mouse">Keyboard</label>
            </li>
            <li>
             <input type="checkbox" name="monitor" value="1" id="monitor"  /><label for="mouse">Monitor</label>
            </li>
        </ul>
    </body>
</html>

<script type="text/javascript">
 var label = jQuery('label[for=' + jQuery(this).attr('id') + ']').html();
 alert(label);
</script>

代码取自这里：http://chandreshrana.blogspot.in/2015/09/how-to-get-checkbox-label-text-jquery.html

【讨论】：