JavaScript的一些常见基础用法（一）

javascript 2019-03-05

JavaScript的一些常见基础用法（一）

2019-03-05

本篇文章主要总结一些在实际应用中常见的基础用法。

主要内容：select、input:radio、input:checkbox

一、获取下拉列表选中的值

1、option为静态的。

<select>
    <option value="null">-请选择-</option>
    <option value="1">第一个值</option>
    <option value="2">第二个值</option>
    <option value="3">第三个值</option>
</select>
<div>
    <span></span>
    <p></p>
</div>
//=======================js代码=========================
$('select').on('change',function(){
	if($(this).children('option').is(':selected')){
		$('span').html(`下拉项的value：${$(this).children('option:selected').val()}`)
		$('p').html(`下拉项的内容：${$(this).children('option:selected').text()}`)
	}
})

2、动态添加option

for(var i=1;i<6;i++){
	var option=`<option>第${i}个值</option>`
	$('select').append(option)
}

要点： change监听select是否发生改动；is(':selected')is()方法，检测select是否被选中。
注意： 获取select下的value不是option的内容而是它的的value属性，这个value常用作一些状态或值等传到后台，而用text()或html()方法才是获取option的内容。

小提示：select文字居中的样式：text-align:center;text-align-last: center;

二、单选框

<input type="radio" value="1" name="sex" id="boy"><label for="boy">男</label>
<input type="radio" value="0" name="sex" id="girl"><label for="girl">女</label>
<input type="radio" value="3" name="sex" id="secret"><label for="secret">保密</label>
<button>确定</button>
<div></div>
//=======================js代码=========================
$('button').click(()=>{
    for(var i=0;i<$('input').length;i++){
        if($('input').eq(i).is(':checked')){
            $('div').html($('input').eq(i).val())
        }	
    }
})

要点： is(‘:checked’)检测是否被选中。
小提示：一组单选框怎么实现单选，请看这里

二、多选框

html代码：

<div>
    <button id="all" onclick="All()">全选</button>
    <button id="null" onclick="Null()">不选</button>
    <button id="reverse" onclick="Reverse()">反选</button>
</div>
<input type="checkbox" value="1"  id="run"><label for="run">跑步</label>
<input type="checkbox" value="2"  id="bike"><label for="bike">骑行</label>
<input type="checkbox" value="3"  id="sing"><label for="sing">跑步</label>
<input type="checkbox" value="4"  id="swimming"><label for="swimming">游泳</label>
<div class="show"></div>

原生js实现：

var ipt=document.getElementsByTagName('input')
function All(){
    for(var i=0;i<ipt.length;i++){
        ipt[i].checked=true
    }
}
function Null(){
    for(var i=0;i<ipt.length;i++){
        ipt[i].checked=false
    }
}
function Reverse(){
    for(var i=0;i<ipt.length;i++){
        ipt[i].checked=!ipt[i].checked
    }
}

jQuery方法实现：

var ipt=$('input:checkbox')
function All(){
    ipt.prop("checked",true)
    show()
}
function Null(){
    ipt.prop("checked",false)
    show()
}
function Reverse(){
    ipt.each((i,e)=>{
        e.checked=!e.checked
            // $(e).prop("checked",!$(e).prop("checked"))
            show()
    })
}
function show(){
    var showValueArr=[]
    var showTextArr=[]
    for(var i=0;i<ipt.length;i++){

        if(ipt.eq(i).is(':checked')){
            showValueArr.push(`${ipt.eq(i).val()} `)
            showTextArr.push(`${$('label').eq(i).html()} `)
        }
    }
    if(showValueArr){
        $('.show').html(`value有：${showValueArr}<br />内容有：${showTextArr}`)
    }
    else{
        $('.show').html('')
    }
}

jQuery方法写的较全。
注意：prop()和attr()的区别，示例
以上用attr()设置checked和用removeAttr()去除checked按理来说没问题，也确实能够取得到值，但是会造成显示效果出错。把上面jQuery中的prop改为attr，如下图：

JavaScript的一些常见基础用法（一）

JavaScript的一些常见基础用法（一）

本篇文章主要总结一些在实际应用中常见的基础用法。

主要内容：select、input:radio、input:checkbox

一、获取下拉列表选中的值

二、单选框

二、多选框