《基于新信息技术的JavaScript程序设计基础》课件-第8章

项目8购物车的全选/全不选效果任务1先导知识：JavaScript对表单控件的操作任务2购物车的全选/全不选效果

任务1先导知识：JavaScript对表单控件的操作

1.通用属性很多表单元素之间有着相同的属性，这些属性的作用和用法都是相同的，下面介绍表单元素中常用的通用属性：

1) disabled

disabled属性是指禁用某个控件使其不可用，用户不能用鼠标对其进行操作，该控件也不能获得焦点，而且被禁用控件的外表会被灰化，使其与其他正常的控件区别开来。更重要的是，如果该控件被禁用，则当表单提交时，后台处理程序不能获得该禁用控件的对应值。

可以在元素标签中disabled属性默认禁用该控件，disabled属性的值是一个布尔值为true或false。

也可以通过脚本操纵disabled属性来禁用或者启用控件。

2) readOnly

readOnly属性主要是针对文本框和文本域。该属性和disabled属性一样，对应的都是布尔值类型为true或false，如果文本框被设置为readOnly即只读，那么该文本框将不能获得焦点，该文本框中既不能输入内容也不能修改文本框中的内容。这时该属性和disabled属性有共同特点，不同的是readOnly属性如果设置为true时，控件的外观不会发生改变，而且在表单提交的时候，后台应用程序依然可以接收到控件对应的值。

需要注意的是，虽然在页面上用户不能输入或者修改被设置成为只读的文本框的内容，但是可以通过脚本来对文本框中的内容进行操作。

3) display

隐藏/显示一个表单控件。display属性是元素样式style属性的一个子属性，通过对style属性中display属性的控制，达到显示/隐藏的效果。如果想隐藏控件，则可以在标签中设定。

2.文本框

文本框在页面中用于接收用户的输入，是一个使用频率很高的表单控件。文本框接收各种形式的字符串，下面介绍文本框的常用操作。

还可以通过onfocus属性给文本框绑定focus事件。在获得焦点的时候能够触发此事件，以及相对应的blur事件，该事件会在失去焦点的时候触发；与此同时，文本框还有常用事件，如change事件，在文本内容改变的时候触发，以及keyUp、keyDown、keyPress等常用的键盘按键事件。

3.复选框

在图形用户界面中，复选框可以在选中与未选中之间切换。如果两个或更多的复选框在物理上组合在一起，它们没有相互作用，即每一个复选框都是独立的。

复选框的<input>标记默认为未选中，在定义中添加常量checked属性可以预先设置选中复选框。这样，在网页显示时，该复选框被选中。复选框标签文本定义在<input>标记外，标签不是复选框的一部分。

4.单选按钮

单选按钮对象在JavaScript应用程序体中不常用。在其他表单控件中，一个对象对应于屏幕上一个可见的元素。由于单选按钮的本质是在两个或多个选项中进行互斥选择，因此，单选按钮对象实际上由一组单选按钮组成，而一组单选按钮中常常有多个可见元素。组中的所有单选按钮共享一个名字，浏览器知道将单选按钮组合在一起，然后在单选按钮组中通过一个单选按钮的单击事件取消任何其他单选按钮的选中状态。除此之外，每个单选按钮都可以有自己的属性，如value或checked属性。

任务2购物车的全选/全不选效果

8.2.1全选/全不选效果1用户在点击超链接时，能实现4个复选框的全选中和全不选中，效果如图8.1所示。

图8.1全选/全不选效果1

8.2.2全选/全不选效果2

点击最上面的全选框，可以实现全选效果，再次点击时，可以实现全不选，效果如图8.2所示。

图8.2