checkbox,radio,select,input各种方法大全，js与jq

 

select大全

html部分

 <select id="aa">
        <option value = "甲">甲方</option>
        <option value = "乙" selected>乙方默认选中</option>
        <option value = "丙">丙方由js进行disabled</option>
        <option value = "戊" disabled>戊方</option>
        <option value = "己" >己方</option>
        <option value = "庚" >庚方</option>
        <option value = "辛" >辛方</option>
</select>

js部分 

    if (document.getElementById('aa').options[2].value == '丙' && document.getElementById('aa').options[2].text == "丙方由js进行disabled") {
        document.getElementById('aa').options[2].disabled = true;
    }
    //--->>>获取select选中的值
    //------>>>第一种方法
    console.log(document.getElementById('aa').value)
    //------>>>第2种方法
    var myselect = document.getElementById("aa");//拿到select对象
    var index = myselect.selectedIndex; // 拿到选中项的索引,selectedIndex代表的是你所选中项的index
    myselect.options[index].value;//拿到选中项options的value
    myselect.options[index].text;//拿到选中项options的text
    //--->>>使某个值作为selected状态
    //------>>>第一种方法
    document.getElementById('aa').options[4].selected = true
    //------>>>第2种方法
    document.getElementById('aa').selectedIndex = 5
    document.getElementById('aa').onchange = function () {
        console.log(this.value)
    }

    document.getElementById('aa').addEventListener('change', function () {
        console.log(this.value)
    }, false)
    /*\
    jQuery方法
    /*/
    console.log('jq拿到选中项的值-方法1', $("#aa option:selected").val());
    console.log('jq拿到选中项的值-方法2', $("#aa").find("option:selected").val());
    console.log('jq拿到选中项的文本', $("#aa option:selected").text());
    console.log('jq拿到选中项的索引', $("#aa").get(0).selectedIndex)
    //--->>>使某个值作为selected状态
    $("#aa").val('辛')
    //--->>>select的change事件
    $("#aa").change(function () {
        console.log($(this).val())
    });

 

 checkBox大全

甲<input type="checkbox" name="ck" value="值甲" id="bb1" >
乙<input type="checkbox" name="ck" value="值已" id="bb2" checked >
丙<input type="checkbox" name="ck" value="值丙" id="bb3" >
丁<input type="checkbox" name="ck" value="值丁" id="bb4" >
<input type="button" value="提交" onclick="checkReverse('ck')"/>

 

function showCkValue(nameEle){
     //获取所有选中的值
    obj = document.getElementsByName(nameEle);
    check_val = [];
    for(var i =0;i<obj.length;i++){
        if(obj[i].checked)
            check_val.push(obj[i].value);
    }
    return check_val.join(',');
}
//--->>>使单个checkBox被选中
document.getElementById("bb1").checked=true
//--->>>获取某个checkbox的值，无论是否选中
document.getElementById("bb1").value
//--->>>查看某个checkbox的值，是否被选中
document.getElementById("bb3").checked
function checkedOne(val,nameEle,unCheck){
    //对单个值进行操作
    //val:要被选中的值
    //nameEle:checkbox的DOM的name
    //unCheck:true表示取消勾选
    var boxes = document.getElementsByName(nameEle);
    for(i=0;i<boxes.length;i++){
            if(boxes[i].value == val){
                if(unCheck){
                    boxes[i].checked = false;
                }else{
                    boxes[i].checked = true;
                }
                break
            }
    }
}

function checkAllOrNot(nameEle,unCheck){
    //全选或全不选
    var boxes = document.getElementsByName(nameEle);
    for(i=0;i<boxes.length;i++){
        if(unCheck){
            boxes[i].checked = false;
        }else{
            boxes[i].checked =true;
        }
    }
}
function checkReverse(nameEle){
    //反选
    var boxes = document.getElementsByName(nameEle);
    for(i=0;i<boxes.length;i++){
            boxes[i].checked = !boxes[i].checked; 
    }
}

/*\
jQuery版
/*/
//获取被选中的值
$('[name=ck]:checked').val()
//使得某个值被选中
$('[name=ck][value="值丙"]').attr('checked',true)
//全选
$('[name=ck]').prop('checked',true)
//全不选
$('[name=ck]').prop('checked',false)
//判断某个值是否被选中
$('[name=ck][index="值丙"]').prop('checked')
//获取所有被选中的值
$('[name=ck]:checked').each(function(k,v){
console.log(k,v)
})
//获取选中的个数
console.log($('[name=ck]:checked').length)

 

 Radio大全

html

<label for="bb1">哈哈哈啊哈
甲<input type="radio" name="ra" value="值甲" id="bb1" ></label>
乙<input type="radio" name="ra" value="值乙" id="bb2" checked >
丙<input type="radio" name="ra" value="值丙" id="bb3" >
丁<input type="radio" name="ra" value="值丁" id="bb4" >
<input type="button" value="提交" onclick="switchRaOne('值甲','ra',1)"/>

js

 function showRaValue(nameEle){
     //获取所有选中的值
    obj = document.getElementsByName(nameEle);
    check_val = '';
    for(var i =0;i<obj.length;i++){
        if(obj[i].checked){
            check_val=obj[i].value;
            break;
        }
    }
     return check_val
}
//--->>>使单个Radio被选中
document.getElementById("bb1").checked=true
//--->>>获取某个Radio的值，无论是否选中
document.getElementById("bb1").value
//--->>>查看某个Radio的值，是否被选中
document.getElementById("bb3").checked

function switchRaOne(val,nameEle,unCheck){
    //对单个值进行操作
    //val:要被选中的值
    //nameEle:checkbox的DOM的name
    //unCheck:true表示取消选中
    var boxes = document.getElementsByName(nameEle);
    for(i=0;i<boxes.length;i++){
            if(boxes[i].value == val){
                if(unCheck){
                    boxes[i].checked = false;
                }else{
                    boxes[i].checked = true;
                }
                break
            }
    }
}
//radio点击时的事件
function radioChange(nameEle, fn) {
    obj = document.getElementsByName(nameEle);
    for (var i = 0; i < obj.length; i++) {
        (function (i) {
            obj[i].onclick = function () {
                fn(this, i)
            }
        })(i)
    }
}
radioChange('ra',function(me,i){
    alert(i)
    alert(me.value)
})
/*\
jQuery版
/*/
//获取被选中的值
$('[name=ra]:checked').val()
//使得某个值被选中
$('[name=ra][value="值丁"]').prop('checked',true)

input和textarea方法一样

 <textarea name="aa" id="txt" cols="30" rows="10"></textarea>

  $("#txt").on('input',function(event){
jQuery1.x版本支持ie6~8,可以搭配propertychange
        document.title=this.value
    });
    document.getElementById('txt').oninput=function(){
        document.title=this.value
    }
    document.querySelector('#txt').addEventListener('input',function(){
        document.title=this.value
    })
    document.getElementById('txt').onpropertychange=function(){
             document.title=this.value
    }
document.getElementById('txt').disabled=false
document.getElementById('txt').attachEvent('onpropertychange',function(){
    //注意:attachEvent里的this指向window,可用https://www.cnblogs.com/kingwell/p/3294704.html修改
})