AmbeForever
AmbeForever
采纳率0%
2016-12-21 01:45

点击ul任何地方,如何获取ul li 里面的值,可支持点击多个ul获取值

现在页面是ul li循环展示出来的,最后一个li是一个checkbox,如何点击选中多个checkbox,可以获取到所以得li的值,并且是k,v形式的数据,我在后台要获取这些值拼成json格式的数据。

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

3条回答

  • save4me save4me 5年前

    你是不是需要实现点击checkbox,获取所有已选择的checkbox的值?如果是的话,请点击演示代码查看是否你需要的结果(浏览器按F11打开开发者模式,在控制台查看输出结果)
    下面是代码实现(因为使用的是原生javascript,没有使用第三方类库,所以请使用IE9以上版本或者Firefox,Chrome)
    javascript:

    function $(el) {
      return document.querySelectorAll(el);
    }
    
    document.addEventListener("DOMContentLoaded", function(event) {
      //console.log("DOM fully loaded and parsed");
    
      document.body.addEventListener('click', function(e) {
        [].forEach.call($('li input'), function(item) {
          if (e.target == item) {
            //console.log("you clicked " + e.target);
    
            var elems = $('input:checked');
            var values = [].map.call(elems, function(item) {
              return item.value;
            })
            //.reverse()
            .join(',');
    
            console.log(values);
    
            //e.preventDefault();
          }
        });
      });
    });
    

    html:

    <ul id='list'>
      <li>
        <input type='checkbox' value='1'>
      </li>
      <li>
        <input type='checkbox' value='2'>
      </li>
      <li>
        <input type='checkbox' value='3'>
      </li>
      <li>
        <input type='checkbox' value='4'>
      </li>
      <li>
        <input type='checkbox' value='5'>
      </li>
    </ul>
    
    点赞 1 评论 复制链接分享
  • hanfeizaopao humorHan 5年前

    建议你整理思路 重新描述问题

    点赞 评论 复制链接分享
  • m86872125 HyperMa0 5年前

    你是想要这一条数据的主键ID值,还是li里的html?

    点赞 评论 复制链接分享

相关推荐