全选：当点击或勾选全部时，列表包括本身复选框选中；
全不选：当点击不选时，包括不选框、全选框都为未选中；
反选：注意全选框状态，需要each()所有，每个都设置一次；
allchk()检测全选框选中状态还是未选中，先算checkbox个数，each每个框，如果true则临时变量+1，最后，临时变量==checkbox个数，证明为全选，！=证明全选框应为未选中状态；

* attr可能返回disabled 或 disabled = 'disabled'
* prop()只返回标准的true false
* 1/只添加属性名称即生效应该使用prop()
* 2/只存在true/flase应该使用prop()
* 所以操作checkbox 的状态时建议全部使用prop()

<pre> //全选

$(&#39;#CheckedAll&#39;).click(function () {
    if (this.checked) {
        $(&#39;[name=items]:checkbox&#39;).prop(&#39;checked&#39;, true)
    } else {
        $(&#39;[name=items]:checkbox&#39;).prop(&#39;checked&#39;, false)
    }
    allchk() //设置全选框状态
})
//全不选
$(&#39;#CheckedNo&#39;).click(function () {
    $(&#39;[name=items]:checkbox,#CheckedAll&#39;).prop(&#39;checked&#39;, false)
    allchk()
})
//反选
$(&#39;#CheckedRev&#39;).click(function () {
    $(&#39;[name=items]:checkbox&#39;).each(function () {
        $(this).prop(&#39;checked&#39;, !$(this).prop(&#39;checked&#39;))
        //this.checked = !this.checked
    })
    allchk()
})
$(&#39;[name=items]:checkbox&#39;).click(function () {
    allchk()
})
$(&#39;#print&#39;).click(function () {
    var arrv = [
    ]
    $(&#39;[name=items]:checkbox:checked&#39;).each(function (i) {
        arrv[i] = $(this).val()
        //arrv.push( $(this).val())
    })
})
//检测及设置全选框是否选中
function allchk() {
    var _chkn = $(&#39;[name=items]:checkbox&#39;).size()
    var _chk = 0
    $(&#39;[name=items]:checkbox&#39;).each(function () {
        if ($(this).prop(&#39;checked&#39;)) {
            _chk++
        }
    })
    if (_chkn == _chk) { //全选
        $(&#39;#CheckedAll&#39;).prop(&#39;checked&#39;, true)
    }
    else {//不全选
        $(&#39;#CheckedAll&#39;).prop(&#39;checked&#39;, false)
    }

See the Pen jbyXro by elmok (@elmok) on CodePen.


<script async src="//assets.codepen.io/assets/embed/ei.js"></script>

select multiple 事件，$('select:first-child option:selected') 获取被选中，

然后使用appendTo【剪切】添加；

使用dblclick()双击事件，重点：获取当前选项：$('option:selected',this);


$('') 完整=== $('',document),后面是作用域；

console.log($('select:first-child option:eq(2)').val());获取第2个值

console.log($('select:first-child option:eq(2)').text());获取第2个text值

<select name="" id="" multiple="multiple">
    <option value="1">选项1</option>
    <option value="2">选项2</option>
    <option value="3">选项3</option>
    <option value="4">选项4</option>
    <option value="5">选项5</option>
</select>

<select name="" id="" multiple="multiple"></select>
<div class="add">选中添加到左边</div>
<div class="addall">全部添加到右边</div>
<script src="jquery-1.11.1.js"></script>
<script>
    $('.add').click(function () {
        var _options = $('select:first-child option:selected')
        _options.appendTo('select:nth-of-type(2)')
    })
    $('.addall').click(function () {
        var _options = $('select:first-child option')
        _options.appendTo('select:nth-of-type(2)')
    })
    //绑定事件，通过$('option:selected',this) 方法获取被选中选项，
    $('select:first-child').dblclick(function () {
        var _options = $('option:selected', this)
        _options.appendTo('select:nth-of-type(2)')
    })
</script>



1、先添加提示内容；

2、文本框失去焦点后处理；

3、由于每次失去焦点后都会创建一个新元素，所以创建之前先删除以前的 remove();

4、在提交表单之前，需要对表单整体进行一次验证，使用trigger()触发blur;

5、即时提醒，表单元素绑定keyup和focus事件;

6、trigger('blur')不仅会触发元素绑定的blur事件，也会触发默认，所以使用triggerHandler('blur')，不触发默认事件

See the Pen meRvbv by elmok (@elmok) on CodePen.


<script async src="//assets.codepen.io/assets/embed/ei.js"></script>

100%死记硬背：对于高版本jq.1.7+ checked, selected 这些属性要用 prop()来操作

例如單選radio控制表格單高亮，当前tr加click,$(this).addClass('on').【兄弟去掉】.siblings().removeClass('on').【返回tr $(this)】.end().【找radio】.find(':radio').【加属性】.prop('checked',true)
，使用attr会出错

<style>
    table{border-collapse: collapse}
    td{border:1px solid #cccccc; padding: 5px 20px;}
    .on{ background: #f1f1f1;}
</style>
<table>
    <tbody>
    <tr>
        <td><input type="radio" name="item" id=""/></td>
        <td>a</td>
        <td>a</td>
        <td>a</td>
    </tr>
    <tr>
        <td><input type="radio" name="item" id=""/></td>
        <td>a</td>
        <td>a</td>
        <td>a</td>
    </tr>
    </tbody>
</table>
<script src="jquery-1.11.1.js"></script>
<script>
$('table tr').click(function () {
    $(this).addClass('on')
            .siblings().removeClass('on')
            .end().find(':radio').prop('checked',true)

})
</script>

//当然也可以使用
$('table :radio:checked').parent().parent().addClass('on')
$('table :radio:checked').parents('tr').addClass('om')
$('tbody>tr:has(:checked)').addClass('on')

表格多行高亮：

$('table tr').click(function () {
  if ($('table tr').hasClass('on')) {
    $(this).removeClass('on').find(':checkbox').prop('checked', false)
  } else {
    $(this).addClass('on').find(':checkbox').prop('checked', true)
  }

//當然，更高級點的寫法
$('table tr').click(function () {
  var hasCheck = $(this).hasClass('on')
  $(this) [hasCheck ? 'removeClass' : 'addClass']('on').find(':checkbox').prop('checked', !hasCheck)
})

表格收縮

<tr class="parent" id="row_01"><td colspan="3">前台设计组</td></tr>
<tr class="child_row_01"><td>张山</td><td>男</td><td>浙江宁波</td></tr>
<tr class="child_row_01"><td>李四</td><td>女</td><td>浙江杭州</td></tr>
   $('table tr.parent').click(function () {
        $(this).toggleClass('on')
                .siblings('.child_'+this.id).slideToggle('slow')
    })