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修改
})