复选框(checkbox)
看书:< input type = " checkbox" name = " checkbox" value = 1> < br>
写字:< input type = " checkbox" name = " checkbox" value = 2> < br>
打飞机:< input type = " checkbox" name = " checkbox" value = 3> < br>
玩游戏:< input type = " checkbox" name = " checkbox" value = 4> < br>
< button onclick = " opcheckboxed ( 'checkbox' , 'checkall' ) " > 全选</ button>
< button onclick = " opcheckboxed ( 'checkbox' , 'uncheckall' ) " > 取消全选</ button>
< button onclick = " opcheckboxed ( 'checkbox' , 'reversecheck' ) " > 反选</ button>
function opcheckboxed ( objName, type ) {
var objNameList= document. getElementsByName ( objName) ;
if ( null != objNameList) {
for ( var i= 0 ; i< objNameList. length; i++ ) {
if ( objNameList[ i] . checked== true )
{
if ( type != 'checkall' ) {
objNameList[ i] . checked= false ;
}
} else {
if ( type != 'uncheckall' ) {
objNameList[ i] . checked= true ;
}
}
}
}
}
复选框(element el-checkbox)
< template>
< el-checkbox :indeterminate = " isIndeterminate" v-model = " checkAll" @change = " handleCheckAllChange" > 全选</ el-checkbox>
< div style = " margin : 15px 0; " > </ div>
< el-checkbox-group v-model = " checkedCities" @change = " handleCheckedCitiesChange" >
< el-checkbox v-for = " city in cities" :label = " city" :key = " city" > {{city}}</ el-checkbox>
</ el-checkbox-group>
</ template>
const cityOptions = [ '上海' , '北京' , '广州' , '深圳' ] ;
export default {
data ( ) {
return {
checkAll : false ,
checkedCities : [ '上海' , '北京' ] ,
cities : cityOptions,
isIndeterminate : true
} ;
} ,
methods : {
handleCheckAllChange ( val ) {
this . checkedCities = val ? cityOptions : [ ] ;
this . isIndeterminate = false ;
} ,
handleCheckedCitiesChange ( value ) {
let checkedCount = value. length;
this . checkAll = checkedCount === this . cities. length;
this . isIndeterminate = checkedCount > 0 && checkedCount < this . cities. length;
}
}
} ;