checkbox

多选框的初始选中与提交

by blackts

HTML

<div id="contenter"></div>
<button>获取选中数据</button>

JavaScript

var arr = [{
    name: '选项1',
    value: '1'
  },
  {
    name: '选项2',
    value: '2'
  },
  {
    name: '选项3',
    value: '3'
  },
  {
    name: '选项4',
    value: '4'
  },
  {
    name: '选项5',
    value: '5'
  },
  {
    name: '选项6',
    value: '6'
  },
  {
    name: '选项7',
    value: '7'
  }
]
//生成页面
var html = '';
arr.forEach(function(item) {
  html += '<div class="check_div">'
  html += '<input type="checkbox" name="demo" value=' + item.value + '>'
  html += '<label>' + item.name + '</label>'
  html += '</div>'
});
$('#contenter').html(html);
//追加选中状态
var checkArr = [{
    name: '选项1',
    value: '1'
  },
  {
    name: '选项5',
    value: '5'
  },
  {
    name: '选项7',
    value: '7'
  }
]
$('#contenter').find('input[name=demo]').each(function(index, ele) {
  checkArr.forEach(function(item) {
    if (item.value == $(ele).val()) {
      $(ele).prop('checked', true);
    }
  });
});
//获取选中状态数组
$('button').click(function() {
  var newArr = [];
  $('#contenter').find('input[name=demo]').each(function(index, ele) {
    if ($(ele).prop('checked')) {
      newArr.push({
        value: $(ele).val()
      })
    }
  });
  alert(JSON.stringify(newArr));
})