html单选错误弹出正确答案怎么写，html标签叙述错误

唉呀，小伙伴们，最近小编刚学了html的一些知识点，发现写页面只有代码技能可不够，更要具备良好的用户体验哦！所以今天，小编就给大家讲一讲如何在html页面中加入单选题库，还能够提示正确答案哦！顺便吐槽一下，小编之前竟然对html标签的叙述也有错误，不好意思啊，火急火燎修正过来啦！

首先，我们得先想好题目和答案啊！假如这里我们要设置一道题目：中国四大名著中，不是西游记的哪本？那么答案就是红楼梦、水浒传、三国演义啦！

然后，代码实现当然是必不可少滴！我们得求助于元素的type属性，来实现单选题啦！代码应该长这样子：

```

红楼梦

水浒传

三国演义

```

注意哦，务必要写上标签，这样用户点击文字也能选中单选框啦！输入name属性才能让单选框归为一组，而value属性则是单选框的值，不懂得还可以查看html教程哦！

好的，现在你已经有了一个单选题框架，但是我们想做到的是，假如用户答错了，应该怎么提示呢？
放心，小编有招！我们可以用js来实现呢！给单选框绑定一个点击事件，这个事件是什么呢，就是每当用户选择或者取消单选框的时候，我们获取选中的值，然后和正确答案比较，错了就提示一下，对了就顺便表扬一番！下面的代码是你需要的：

```

function checkAnswer(){

var answer = parseInt($('input[name="chineseNovel"]:checked').val());

if(answer != 1){ //注意，这里正确答案是红楼梦，所以是1

alert('你回答错了，红楼梦才是四大名著中不是西游记的啊！');

}else{

alert('恭喜你，回答正确！');

}

}

$('input[name="chineseNovel"]').click(checkAnswer);

```

再解释一下，首先checkAnswer()函数中，我们获取了用户选择的单选框的值，如果回答不对，就会alert弹出提示，如果回答正确，就会弹出表扬！可能有小伙伴还没有接触过jquery，不了解$('')这样的写法，其实这是一种选择器的写法，可以选择文档中的元素，这里$('input[name="chineseNovel"]')就是选择所有的name属性为chineseNovel的input元素！至于click函数，则是在获取到这些元素之后给它们绑定一个点击事件！

还有一个小细节，就是我们可以将正确答案瞬间在页面中展示出来，让用户可以一目了然！只需要在相应位置加上这段代码：

```

正确答案是：红楼梦

```

然后，我们再加上样式：

```

span{

font-weight: bold;

color: red;

}

```

这样，红楼梦就会以粗体红色字体被突出显示在页面中啦！

小编在这里还想纠正一下之前的错误。我曾经犯了一个低级错误，就是叙述了