jquery和js操作checkbox radio select

最新推荐文章于 2021-07-21 16:19:20 发布

elfenliedef

最新推荐文章于 2021-07-21 16:19:20 发布

阅读量607

点赞数

分类专栏： javascript jquery 文章标签： jquery function input button html

本文链接：https://blog.youkuaiyun.com/elfenliedef/article/details/6050255

版权

javascript 同时被 2 个专栏收录

16 篇文章

订阅专栏

jquery

10 篇文章

订阅专栏

<!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" οnclick='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" οnclick='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" οnclick="getCheckBox_js()" value='js得到选中的checkbox'/>
</body>
</html>