溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

radio, checkbox,Select的操作

發(fā)布時(shí)間：2020-06-30 09:56:47 來(lái)源：網(wǎng)絡(luò) 閱讀：312 作者：zheng854938169 欄目：開(kāi)發(fā)技術(shù)

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>對(duì)下拉列表select的基本操作</title>
<script src="jquery-1.8.2.min.js"></script>
</head>

<body>
<select name="jumpMenu" id="jumpMenu" >
<option value="1">111</option>
<option value="2">222</option>
<option value="3">333</option>
<option value="4">444</option>
<option value="5">555</option>
</select>

<script type="text/javascript">
$(function(){
 
 
  $("#jumpMenu").val(4);//設(shè)置value值為4的option被選中

  var array = new Array();
  $("#jumpMenu option").each(function(i,obj){
     var value = $(this).text();
    
    if($(this).text()==444){ //設(shè)置text值為444的option被選中
      $(this).attr("selected","selected");
    }
    array.push(value);
    
  })
 
  $("#jumpMenu option[value='3']").attr("selected", "selected"); //設(shè)置value值為3的option被選中
  var v1 = $("#jumpMenu").find("option:selected").text();//獲取option被選中的 text
  var v2 = $("#jumpMenu ").val();//獲取option被選中的 value

 


});
</script>
</body>

radio:

1.獲取radio選中值，三種方法都可以：

$('input:radio:checked').val()；

$("input[type='radio']:checked").val();

$("input[name='rd']:checked").val();

2.設(shè)置第一個(gè)Radio為選中值：

    $('input:radio:first').attr('checked', 'checked');

或者

$('input:radio:first').attr('checked', 'true');

注：attr("checked",'checked')= attr("checked", 'true')= attr("checked", true)

3.設(shè)置最后一個(gè)Radio為選中值：

$('input:radio:last').attr('checked', 'checked');

4.遍歷Radio

$('input:radio').each(function(index,domEle){

     //寫(xiě)入代碼

});


select:

1.獲取選中項(xiàng)的Value值：

      $('select#sel option:selected').val();

     或者

       $('select#sel').find('option:selected').val();

 獲取選中項(xiàng)的Text值：

      $('select#sel option:selected').text();

2.  設(shè)置第一個(gè)option為選中值：

$('select#sel option:first').attr('selected','true')


checkbox:

<script>

$("document").ready(function(){  

$("#btn1").click(function(){  

$("[name='checkbox']").attr("checked",'true');//全選  

})  

$("#btn2").click(function(){  

$("[name='checkbox']").removeAttr("checked");//取消全選  

})  

$("#btn3").click(function(){  

$("[name='checkbox']:even").attr("checked",'true');//選中所有奇數(shù)  

})  

$("#btn4").click(function(){  

$("[name='checkbox']").each(function(){//反選  

if($(this).attr("checked")){  

$(this).removeAttr("checked");  

}  

else{  

$(this).attr("checked",'true');  

}  

})  

})  

$("#btn5").click(function(){//輸出選中的值  

var str="";  

$("[name='checkbox'][checked]").each(function(){  

str+=$(this).val()+"/r/n";  

//alert($(this).val());  

})  

alert(str);  

})  

}) 


   $(function(){

var array = new Array();

$("#check1").click(function(){

if($(this).attr('checked')){

 $("#div1").find("input[type='checkbox']").attr('checked',true);

 }else{

   $("#div1").find("input[type='checkbox']").attr('checked',false);

 }

});

$("#btn").click(function(){

$("#div1").find("input[type='checkbox']:checked").each(function(index,ele){

   // var v = $(this).val();

var v = $(this).val();

array.push(v);

});

alert(array);

});

});

//獲取checkbox的值

function chk(){    

  var obj=document.getElementsByName('test');  //選擇所有name="'test'"的對(duì)象，返回?cái)?shù)組    

  //取到對(duì)象數(shù)組后，我們來(lái)循環(huán)檢測(cè)它是不是被選中    

  var s='';    

  for(var i=0; i<obj.length; i++){    

    if(obj[i].checked) s+=obj[i].value+',';  //如果選中，將value添加到變量s中    

  }    

  //那么現(xiàn)在來(lái)檢測(cè)s的值就知道選中的復(fù)選框的值了    

  alert(s==''?'你還沒(méi)有選擇任何內(nèi)容！':s);    

}    

    

function jqchk(){  //jquery獲取復(fù)選框值    

  var chk_value =[];    

  $('input[name="test"]:checked').each(function(){    

   chk_value.push($(this).val());    

  });    

  alert(chk_value.length==0 ?'你還沒(méi)有選擇任何內(nèi)容！':chk_value);    

}

 </script> 

  

 

</HEAD>  

<body mce_>  

<div >  

<form name="form1" method="post" action="">  

<input type="button" id="btn1" value="全選">  

<input type="button" id="btn2" value="取消全選">  

<input type="button" id="btn3" value="選中所有奇數(shù)">  

<input type="button" id="btn4" value="反選">  

<input type="button" id="btn5" value="獲得選中的所有值">  

<br /><br />  

<input type="checkbox" name="checkbox" value="checkbox1">  

checkbox1  

<input type="checkbox" name="checkbox" value="checkbox2">  

checkbox2  

<input type="checkbox" name="checkbox" value="checkbox3">  

checkbox3  

<input type="checkbox" name="checkbox" value="checkbox4">  

checkbox4  

<input type="checkbox" name="checkbox" value="checkbox5">  

checkbox5  

<input type="checkbox" name="checkbox" value="checkbox6">  

checkbox6  

</form>  

</div>


<div>

    <input type="checkbox" id="check1" />全選<br />

<div id="div1" >

        

    <input type="checkbox"  value="apple"/>蘋(píng)果<br />

        <input type="checkbox"  value="balana"/>香蕉<br />

        <input type="checkbox"  value="pear"/>梨子<br />

        <input type="checkbox"  value="orange"/>橘子<br />

        

        <input type="button" id="btn" value="獲取選擇的值"/>

    </div>

</div>

  

</body>  

</HTML> 


向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手