jquery和js操作checkbox radio select

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>js与jq对html控件的操作总结 </title>
 
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src='jquery-1.4.2.min.js'></script>
 <script type="text/javascript">
 $(function(){
  $("#radio_jq").click(function(){
   //alert($("input[name='myradio'][checked]").val());
   alert($(":radio[name='myradio'][checked]").val());
   $('radio[name=myradio]').get(1).checked = true;
  });
  $("#select_jq").click(function(){
   alert($("select[name=myselect] option[selected]").text()+":"+$("select[name=myselect] option[selected]").val());
   $('#myselect')[0].selectedIndex = 1;
  });
  $("#checkedAll").click(function() {
   if ($(this).attr("checked") == true) { // 全选
    $(":checkbox[name='checkbox_name']").each(function() {
     $(this).attr("checked", true);
    });
   } else { // 取消全选
    $(":checkbox[name='checkbox_name']").each(function() {
     $(this).attr("checked", false);
    });
   }
  });
  $(":checkbox[name='checkbox_name']").click(function(){
   alert($(this).val());
   alert($(this).attr('id'));
  });
  $("#checkbox_jq").click(function(){
   var str = "";
   $(":checkbox[name=checkbox_name]").each(function(){
    if($(this).attr('checked') == true){
     str+=$(this).attr('id');
    }
   });
   alert(str);
  });
 });
 function getCheckedRadio_js(){
  var proRadio = document.getElementsByName('myradio');
  for(var j=0;j<proRadio.length;j++){
   if(proRadio[j].checked){
    alert("第"+(j+1)+"个被选中");
    break;
   }
  }
 }
 function getSelected_js(){
  alert(myselect.options[myselect.selectedIndex].text+":"+myselect.options[myselect.selectedIndex].value);
 }
 function getCheckBox_js(){
  var str="";
  var checkboxes = document.getElementsByName('checkbox_name');
  for(var i = 0;i<checkboxes.length;i++){

   if(checkboxes[i].checked){
    str+=checkboxes[i].id+",";
   }
  }
  alert(str);
 }
 //select下拉框的第二个元素为当前选中值
 //$('#select_id')[0].selectedIndex = 1;
 //radio单选组的第二个元素为当前选中值
 //$('input[@name=items]').get(1).checked = true;

 </script>
  </head>
 
  <body>
   radio:<br>第一个:<input type="radio" name="myradio" value='1'>
    第二个:<input type="radio" name="myradio" value='2'>
  第三个:<input type="radio" name="myradio" value='3'>
  第四个: <input type="radio" name="myradio" value='4'>
   <input type="button" id="radio_jq" value='jq查看被选中的radio'/>
   <input type="button" id="radio_js" onclick='getCheckedRadio_js()' value='js查看被选中的radio'/>
   <br/>
   select:
   <select id='myselect' name='myselect'>
  <option value='quick' defaultSelected='true'>快速排序</option>
  <option value='maopao'>冒泡排序</option>
   </select>
   <input type="button" id="select_jq" value='jq得到select'/>
   <input type="button" id="select_js" onclick='getSelected_js()' value='js得到select'/>
   <br/>
   checkbox:
 <br/>
 <input type="checkbox" name="checkedAll" id="checkedAll"/>全选|取消全选<br/>
 <input type="checkbox" name="checkbox_name" id="checkbox_name_1" value="123"/>1<br/>
 <input type="checkbox" name="checkbox_name" id="checkbox_name_2" />2<br/>
 <input type="checkbox" name="checkbox_name" id="checkbox_name_3" />3<br/>
 <input type="checkbox" name="checkbox_name" id="checkbox_name_4" />4<br/>
 <input type="button" id="checkbox_jq" value='jq得到选中的checkbox'/>
 <input type="button" id="checkbox_js" onclick="getCheckBox_js()" value='js得到选中的checkbox'/>
  </body>
</html>

你可能感兴趣的:(jquery和js操作checkbox radio select)