js怎么实现单选和多选功能切换,点击单选是单选题,点击多选是多选题

JavaScript020

js怎么实现单选和多选功能切换,点击单选是单选题,点击多选是多选题,第1张

有很多方法可以实现,不过要看你的具体需求,一般可以做成两类题目,选单选的时候显示单选的题目,多选的时候显示多选的题目;如果是想同一个题目变换单选和多选的话可以用Jquery来操作单选和多选的HTML:

首先在选项上绑定事件,然后在事件中获取当前选择的是单选还是多选,然后通过类选择器或者标签选择器来获取选项前面的选择按钮组,用循环进行遍历拿到每一个单选/多选按钮,然后用append()方法在拿到的按钮后面添加要变换的按钮,最后把拿到的按钮删掉。

思路就是这样,具体代码需要的话可以后面再贴上。

首先你要有个方格(*^__^*) ,,

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

<!doctype html>

<html lang="en">

<head>

<meta charset="UTF-8">

<style>

.div_bor{

border:1px solid #274b8b

padding: 5px 5px 10px 5px

}

</style>

</head>

<body>

<div class="div_bor">

<p>这是题目</p>

<p><input type="checkbox" value="A">A.选项1</p>

<p><input type="checkbox" value="B">B.选项2</p>

<p><input type="checkbox" value="C">C.选项3</p>

<p><input type="checkbox" value="D">D.选项4</p>

<p><input type="checkbox" value="E">E.选项5</p>

<p><button style="float: right" onclick="fn()">确定</button></p>

</div>

<script>

var rule = ['A','C','D']//答案

var boxs = document.getElementsByTagName('input')

var check = []

var score = 0

function fn(){

check=[]

score = 0

for(var i=0i<boxs.lengthi++){

if(boxs[i].checked){

check.push(boxs[i].value)

}

}

for(var j=0j<check.lengthj++){

if(rule.indexOf(check[j]) !=-1){

score++

}else{

score--

}

}

alert(Math.ceil(100/rule.length*score)+'分')// 分数规则,自己定吧

}

</script>

</body>

</html>