四时宝库

程序员的知识宝库

input选中的常见操作场景(input默认选中)

1、form表单序列化形式

//选中的列,进行数据导出
html布局:
<form id="infoTableForm">
<input type="checkbox" class="choose-input" name="checked[]" value="24">
</form>
<a href="javascript:void(0);" data-url="/admin/export"
class="js-checkdata">导出选中数据</a>

//相关js处理
 $html.off('click','.js-checkdata').on('click','.js-checkdata',function(){
   var $self = $(this);
   $self.attr('href',$self.attr('data-url')+"?"+$('#infoTableForm').serialize());
 });

//获取选中的元素,用数组的形式存起来。
var tmp=[];
 $('.choose-input:checked').each(function () {
     tmp.push($(this).val());
 }); 

全选

 // 全选
//此时是手动触发的点击事件
$html.off('click','.js-allChoose').on('click','.js-allChoose',function(){
  var $t=$(this),
      isChecked = $t.prop('checked');
  //因为手动触发,所以可以知道isChecked是true or false
  //如果不是手动触发,比如 $('.defaultBook').trigger('change'); 
  //手动那么$t.prop('checked')的false/true是保持不变的,需要考虑或者强制赋值
  if (isChecked) {
    $('.choose-input').prop('checked', true);
  }
  else{
    $('.choose-input').prop('checked', false);
  }
});

发表评论:

控制面板
您好,欢迎到访网站!
  查看权限
网站分类
最新留言
    友情链接