单选与多选

单选：Radio 对象代表 HTML 表单中的单选按钮。

在 HTML 表单中 <input type="radio"> 每出现一次，一个 Radio 对象就会被创建。

多选：在 HTML 文档中 <input type="checkbox"> 每出现一次，Checkbox 对象就会被创建。

可以通过遍历表单的 elements[] 数组来访问某个选择框，或者通过使用 document.getElementById()

Checkbox 对象的属性：

①accessKey 设置或返回访问 checkbox 的快捷键

注释：请使用 Alt + accessKey 为拥有指定快捷键的元素赋予焦点

语法：checkboxObject.accessKey=accessKey

实例：

<form>
<input type="checkbox" accesskey="c" id="check1" />
</from>
<p>AccessKey for checkbox is: </p>
<script type="text/javascript">
x=document.getElementById('check1');
document.write(x.accessKey);
</script>

②alt 可设置或返回浏览器不支持 checkbox 时显示的替代文本

语法：checkboxObject.alt=alternate_text

<form>
I have a bike: <input id="bike" alt="bike" type="checkbox" name="Bike" />
<br />
I have a car: <input id="car" alt="car" type="checkbox" name="Car" />
</form>
<p>The alt text for the checkboxes are:
<script type="text/javascript">
document.write(document.getElementById('bike').alt);
document.write(" and ");
document.write(document.getElementById('car').alt);
</script></p>

③checked 设置或返回 checkbox 是否应被选中

<input type="checkbox" id="check1" checked="checked" />

语法：checkboxObject.checked=true|false

<script type="text/javascript">
    function createOrder()
    {
        console.log(document.forms[0].coffee)
        coffee=document.forms[0].coffee
        txt=""
        for (i=0;i<coffee.length;++ i)
        {
            if (coffee[i].checked)
            {
                txt=txt + coffee[i].value + " "
            }
        }
        document.getElementById("order").value="您订购的咖啡带有： " + txt
    }
</script>
<body>
<p>你喜欢怎么喝咖啡？</p>
<form>
    <input type="checkbox" name="coffee" value="奶油">加奶油<br />
    <input type="checkbox" name="coffee" value="糖块">加糖块<br />
    <br />
    <input type="button" onclick="createOrder()" value="发送订单">
    <br /><br />
    <input type="text" id="order" size="50">
</form>

拓展：

1.通过元素属性name获得所有name="coffee"的值

2.form 属性返回对包含该元素的表单对象的引用,forms 集合可返回对文档中所有 Form 对象的引用

form例子：

<form id="form1">
<input type="checkbox" id="check1" />
</form>
<p>The form containing the checkbox is: 
<script type="text/javascript">
x=document.getElementById('check1');
document.write(x.form.id);
</script></p>

forms 例子：

<form id="Form1" name="Form1">
您的姓名：<input type="text">
</form>
<form id="Form2" name="Form2">
您的汽车：<input type="text">
</form>
<p>
要访问集合中的项目，你既可以使用项目编号，也可以使用项目名称：
</p>
<script type="text/javascript">
document.write("<p>第一个表单名称是：" + document.forms[0].name + "</p>")
document.write("<p>第一个表单名称是：" + document.getElementById("Form1").name + "</p>")
</script>

3.遍历数组获取已选中对象

这里再写个小例子，js获取表单数据

<form action="result.jsp" id="form1" method="post" name="form1">
    username : <input type="text" id="username" name="username" value=""/><br><br/>
    password : <input type="password" id="password" name="pawd" value=""/><br><br/>
    sex :
    <input type="radio" name="sex" value="男" checked="checked"/>男
    <input type="radio" name="sex" value="女"/>女<br><br/>
    addr :
    <select id="addr" name="province">
            <option value="北京">北京</option>
            <option value="上海">上海</option>
            <option value="广州">广州</option>
            <option value="深圳">深圳</option>
    </select><br><br/>
    fruits :
    <input type="checkbox" name="fruits" value="Banana"/>香蕉
    <input type="checkbox" name="fruits" value="Apple"/>苹果
    <input type="checkbox" name="fruits" value="Orange"/>橘子
    <input type="checkbox" name="fruits" value="Watermelon"/>西瓜 <br/><br/>
    <input type="button" value="提交" onclick="getForm()">
</form>
<script type="text/javascript">
    function getForm()
    {
        var form = document.getElementById("form1");   //获取id为“form1”表单中所有的属性的数据
        var content = form[0].value;   //获取form表单中第一个元素的值
        alert("姓名:"+content); //就是username的值

        var pass = document.getElementById("password").value;   //直接通过元素的属性Id来直接获取
        alert("password : " + pass);

        var sex = document.getElementsByName('sex'); //通过元素属性name获取sex的值
        for(var i = 0; i < sex.length; i++)
        {
            if(sex[i].checked)
                alert("性别："+sex[i].value);
        }

        var addr = document.getElementById("addr").value;  //直接通过元素的属性Id来直接获取选择下拉菜单的值
        alert("来自"+addr);

        var fruits = document.getElementsByName("fruits"); //通过元素属性name获得所有name="fruits"的值
        var str ="";
        for(var j=0; j<fruits.length;j++)
        {
            if(fruits[j].checked)
                str += fruits[j].value+",";
        }
        alert("你选择的食物是："+str);
    }

</script>

③defaultChecked 返回 checked 属性的默认值

语法：checkboxObject.defaultChecked

默认被选中时返回true，否则返回false，例子：

<form>
<input type="checkbox" id="myCheck" checked="checked" />
</form>

<script type="text/javascript">
alert(document.getElementById("myCheck").defaultChecked)
</script>

④disabled 设置或返回是否禁用 checkbox

语法：checkboxObject.disabled=true|false

<input type="checkbox" id="check1" disabled="disabled" />

⑤form 返回对包含 checkbox 的表单的引用，上面已做详解

forms 集合可返回对文档中所有 Form 对象的引用

⑥id 设置或返回 checkbox 的 id

⑦name 设置或返回 checkbox 的名称

⑧tabIndex 设置或返回 checkbox 的 tab 键控制次序，这个我在后面文章http://570109268.iteye.com/blog/2405709做了详解

⑨type 返回元素的表单类型。对于一个 checkbox 对象，该属性总是返回 "checkbox"

<form>
<input type="checkbox" id="check1" />
</form>
<script type="text/javascript">
x=document.getElementById("check1");
document.write("Form element type is: ");
document.write(x.type);
</script>

⑩value 设置或返回 checkbox 的 value 属性的值

猜你喜欢