JS操作Button、Select和Radio

东方和志
2023-12-01

好记性不如烂笔头,记录一些常用的操作,方便随时查看:
一、JS操作Button

Button有两种类型 :
<input type="button" id="btn01" value="按钮1"/>     
 <Button id="btn02">按钮2</Button>
1.JS修改按钮文字方法
document.getElementById("btn01").value="新按钮1";
document.getElementById("btn02").innerHtml="新按钮2";
 2.JS控制按钮显示与否 
document.getElementById("btn01").style.display = "block";//显示
document.getElementById("btn01").style.display = "none";//隐藏
 3.JS控制按钮可用与否 
document.getElementById("btn01").disabled=true;//不可用
document.getElementById("btn01").disabled=false;//可用

二、JS操作Select

1、动态添加选项option
  var obj=document.getElementById('mySelect');    //根据id查找对象,  
  //添加一个选项  
   obj.add(new Option("文本","值"));    //这个只能在IE中有效  
   obj.options.add(new Option("text","value")); //这个兼容IE与firefox  

2、删除所有选项option  
var obj=document.getElementById('mySelect');  
   obj.options.length=0;  

3、删除一个选项option 
var obj=document.getElementById('mySelect');  
    //index,要删除选项的序号,这里取当前选中选项的序号  
    var index=obj.selectedIndex;  
    obj.options.remove(index);

4、获得选项option的值
var obj=document.getElementById('mySelect');  
var index=obj.selectedIndex; //序号,取当前选中选项的序号  
var val = obj.options[index].value; 

5、获得选项option的文本
    var obj=document.getElementById('mySelect');   
    var index=obj.selectedIndex; //序号,取当前选中选项的序号  
    var val = obj.options[index].text; 

6、修改选项option
    var obj=document.getElementById('mySelect');  
    var index=obj.selectedIndex; //序号,取当前选中选项的序号  
    var val = obj.options[index]=new Option("新文本","新值"); 

7、删除select 
    var mySelect = document.getElementById("mySelect");  
    mySelect.parentNode.removeChild(mySelect); 

三、JS操作Radio

例子:
<input name="test" type="radio" value="0" checked="checked" />
<input name="test" type="radio" value="1" />
<input name="test" type="radio" value="2" />

1.获取选中值,三种方法都可以:
    $('input:radio:checked').val();
    $("input[type='radio']:checked").val();
    $("input[name='test']:checked").val();

2.设置第一个Radio为选中值:
    $('input:radio:first').attr('checked', 'checked'); 或者  $('input:radio:first').attr('checked', 'true');
    注:attr("checked",'checked')= attr("checked", 'true')= attr("checked", true);

3.设置最后一个Radio为选中值:
    $('input:radio:last').attr('checked', 'checked'); 或者  $('input:radio:last').attr('checked', 'true');

4.根据索引值设置任意一个radio为选中值:
    $('input:radio').eq(索引值).attr('checked', 'true');索引值=0,1,2.... 或者 $('input:radio').slice(1,2).attr('checked', 'true');

5.根据Value值设置Radio为选中值
    $("input:radio[value='rd2']").attr('checked','true'); 或者 $("input[value='rd2']").attr('checked','true');

6.删除Value值为rd2的Radio
    $("input:radio[value='rd2']").remove();

7.删除第几个Radio
    $("input:radio").eq(索引值).remove();索引值=0,1,2....  如删除第3个Radio:$("input:radio").eq(2).remove();

8.遍历Radio
function Foo()
{
    var selectedIndex = -1;
    var form1 = document.getElementsByName("test");
    var i = 0;
    
    for (i=0; i<form1.r.length; i++)
    {
        if (form1.r[i].checked)
        {
            selectedIndex = i;
            alert("您选择项的 value 是:" + form1.r[i].value);
            break;
        }
    }
    if (selectedIndex < 0)
    {
        alert("您没有选择任何项");
    }
}


 类似资料: