js实现元素的多选,或单选功能

JavaScript020

js实现元素的多选,或单选功能,第1张

效果预览 

html中-css中 - 以ul 和 li标签双层结构为例 

js中

1,定义一个init方法, 完成处理数据 并把最后选中的数据返回

1.通过getArr方法,  挂载了li元素的点击事件liClick方法, 并返回处理好的数据arr,checkbox的话arr里面是多条选中的,radio则为单条

 通过array的特性来达到return返回的数据同步

2.根据传递过来的type类型判断是单选框还是复选框, 来调用不同的处理函数checkboxFun或radioFun

3.checkboxFun完成了复选框的一些数据处理操作  , , radioFun 完成了单选框的一些数据处理操作

2, 获取子元素集合, 并调用init函数, 

init函数调用并会返回一个newArr,   这个newArr就是最新的数据集合

这样就可以实现一个单选多选的功能了

本文实例讲述了js使用DOM设置单选按钮、复选框及下拉菜单的方法。分享给大家供大家参考。具体实现方法如下：

1.设置单选按钮

单选按钮在表单中即<input

type="radio"

/>它是一组供用户选择的对象，但每次只能选一个。每一个都有checked属性，当一项选择为ture时，其它的都变为false.

先贴上一个例子：

复制代码

代码如下:<script

type="text/javascript">

function

getChoice()

{

var

oForm

=

document.forms["uForm1"]

var

aChoices

=

oForm.camera

for

(i

=

0

i

<

aChoices.length

i++)

//遍历整个单选项表

if

(aChoices[i].checked)

//如果发现了被选中项则退出

break

alert("相机品牌是："

+

aChoices[i].value)

}

function

setChoice(iNum)

{

var

oForm

=

document.forms["uForm1"]

oForm.camera[iNum].checked

=

true

}

</script>

<form

method="post"

name="uForm1"

action="addInfo.aspx">

相机品牌：

<p>

<input

type="radio"

name="camera"

id="canon"

value="Canon">

<label

for="canon">Canon</label>

</p>

<p>

<input

type="radio"

name="camera"

id="nikon"

value="Nikon">

<label

for="nikon">Nikon</label>

</p>

<p>

<input

type="radio"

name="camera"

id="sony"

value="Sony"

checked>

<label

for="sony">Sony</label>

</p>

<p>

<input

type="radio"

name="camera"

id="olympus"

value="Olympus">

<label

for="olympus">Olympus</label>

</p>

<p>

<input

type="radio"

name="camera"

id="samsung"

value="Samsung">

<label

for="samsung">Samsung</label>

</p>

<p>

<input

type="radio"

name="camera"

id="pentax"

value="Pentax">

<label

for="pentax">Pentax</label>

</p>

<p>

<input

type="radio"

name="camera"

id="others"

value="其它">

<label

for="others">others</label>

</p>

<p>

<input

type="submit"

name="btnSubmit"

id="btnSubmit"

value="Submit"

class="btn">

</p>

<p>

<input

type="button"

value="检测选中对象"

onclick="getChoice()">

<input

type="button"

value="设置为Canon"

onclick="setChoice(0)">

</p>

</form>

<!DOCTYPE HTML>

<html>

<head>

<meta charset="UTF-8" />

<title>last.html</title>

<style type="text/css">

</style>

<script type="text/javascript">

onload = function ()

{

var inputs = document.querySelectorAll('input[type=radio]')

var fun = function (i)

{

var input = inputs[i]

if (input.type == 'radio')

            {

            input.onclick = function ()

            {

             alert(this.value)

            }

            }

}

for ( var i = 0 i < inputs.length i++)

        {

fun (i)

        }

}

</script>

</head>

<body>

<input id="radio1" type="checkbox" name="chkbox" value="1" onclick="DoCheck()" />A单元

<br />

<input id="radio0" type="radio" name="radio1" value="60" onclick="Do1Check(60,1,1,1)" />1、套餐A。费用：60元

<br />

<input id="radio1ww" type="radio" name="radio1" value="199" onclick="Do1Check(199,1,2,1)" />2、套餐B。费用：70元

<br />

<input id="radio2" type="checkbox" name="chkbox" value="2" onclick="DoCheck()" />B单元

<br />

<input id="radio6" type="radio" name="radio2" value="100" onclick="Do1Check(100,2,7,1)" />1、套餐A。费用：100元

<br />

<input id="radio7" type="radio" name="radio2" value="800" onclick="Do1Check(800,2,8,1)" />2、套餐B。费用：200元

<br />

<input id="radio8" type="radio" name="radio2" value="1399" onclick="Do1Check(1399,2,9,1)" />3、套餐C。费用：300元

<br />

</body>

</html>