javascript – 获取并显示选中的复选框索引

发布时间:2020-09-16 发布网站:编程之家
编程之家收集整理的这篇文章主要介绍了javascript – 获取并显示选中的复选框索引编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
当用户每次使用 Jquery检查复选框时,我试图显示复选框位置.例如,当用户检查星期一时,它将显示位置0,当用户检查星期日时,它将显示位置6.我找不到办法.我曾尝试使用.index()但它一直向我显示0.如何做到这一点的任何想法?

HTML代码

<div class="col-sm-9 checkbox_days">
    <label class="checkbox">
        <input type="checkbox" class="day" name="day[]" value="Monday"> Monday
    </label>
    <label class="checkbox">    
        <input type="checkbox" class="day" name="day[]" value="Tuesday"> Tuesday
    </label>
    <label class="checkbox">
        <input type="checkbox" class="day" name="day[]" value="Wednesday"> Wednesday
    </label>
    <label class="checkbox">
        <input type="checkbox" class="day" name="day[]" value="Thursday"> Thursday
    </label>
    <label class="checkbox">                        
        <input type="checkbox" class="day" name="day[]" value="Friday"> Friday
    </label>
    <label class="checkbox">                        
        <input type="checkbox" class="day" name="day[]" value="Saturday"> Saturday
    </label>
    <label class="checkbox">                        
        <input type="checkbox" class="day" name="day[]" value="Sunday"> Sunday
    </label>
</div>

JQuery的

$('.day').on('change',function() {
    $(this).each(function() {
        if (this.checked) {
            alert($(this).index());
        } else {
            alert("unchecked");
        }
    });
});

解决方法

您需要使用 .index(element)在列表中查找元素索引.

$('.day').index(this)

If no argument is passed to the .index() method,the return value is an integer indicating the position of the first element within the jQuery object relative to its sibling elements.

$(function() {
  $('.day').on('change',function() {

    if (this.checked) {
      alert($('.day').index(this));
    } else {
      alert("unchecked");
    }

  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-sm-9 checkbox_days">
  <label class="checkbox">
    <input type="checkbox" class="day" name="day[]" value="Monday">Monday
  </label>
  <label class="checkbox">
    <input type="checkbox" class="day" name="day[]" value="Tuesday">Tuesday
  </label>
  <label class="checkbox">
    <input type="checkbox" class="day" name="day[]" value="Wednesday">Wednesday
  </label>
  <label class="checkbox">
    <input type="checkbox" class="day" name="day[]" value="Thursday">Thursday
  </label>
  <label class="checkbox">
    <input type="checkbox" class="day" name="day[]" value="Friday">Friday
  </label>
  <label class="checkbox">
    <input type="checkbox" class="day" name="day[]" value="Saturday">Saturday
  </label>
  <label class="checkbox">
    <input type="checkbox" class="day" name="day[]" value="Sunday">Sunday
  </label>
</div>

总结

以上是编程之家为你收集整理的javascript – 获取并显示选中的复选框索引全部内容,希望文章能够帮你解决javascript – 获取并显示选中的复选框索引所遇到的程序开发问题。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您喜欢交流学习经验,点击链接加入编程之家官方QQ群:1065694478
编程之家官方公众号

微信公众号搜索 “ 程序精选 ” ,选择关注!

微信公众号搜索 “ 程序精选 ”
精选程序员所需精品干货内容!