表单选择框

实现要求:1、点击全选框,将所有的选择框选中 2、点击全不选框,将所有选中的选中框全部清除选中,处于没有选中的状态。 3、点击反选,将已经选中的框变为没有选中,将没有选中的框,变为选中。

要点: :checkbox 匹配所有复选框 attr(‘checked‘,true/false)

HTML中基本框架:

js

实现全选功能:

$(‘#all‘).on(‘click‘,function(){ $(‘#checkbox>:checkbox‘).attr(‘checked‘,true); });

实现全不选功能

$(‘#none‘).on(‘click‘,function(){ $(‘#checkbox>:checkbox‘).attr(‘checked‘,false); });

实现反选功能

$(‘#fan‘).on(‘click‘,function(){ $(‘#checkbox>:checkbox‘).each(function(){ $(this).attr(‘checked‘,!$(this).attr(‘checked‘)); }); });

时间: 2024-08-05 01:48:31

表单选择框的相关文章

ionic.css界面组件:表单-选择框

选择框 : .item-select select 在每个平台上,选择框的表现形式都不一样,例如,在PC上,是一个传统的下拉框,在Android 是一个单选弹出窗,而iOS上是一个覆盖半个窗体的定制滚动器: 通常总是将选择框与文字一起放入列表条目中,使用如下HTML模板创建选择框条目: <label class="item-input item-select">     <any class="input-label"></any>

jQuery学习笔记(四)——表单选择

一.表单选择 1.$('input[type=password][name=user]').val() 2.$(':password[name=user]').val() 二.表单过滤 1.$(':enabled') 选择可使用的元素 2.$(':disabled') 选择不可使用的元素 3.$(':cheched') 选择选定的单选和复选元素 4.$(':selected') 选择选定的下拉菜单的元素

Easyui表单,文本框,下拉菜单三级联动练习代码

1 <%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncoding="UTF-8"%> 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&g

Chrome表单文本框自动填充黄色背景色样式

开发后台管理系统或 网站时,使用谷歌的Chrome浏览器访问网页中表单,文本框背景色自动填充为黄色.这个问题在网络上其实早已经是老生常谈了,今天正巧我要处理这个问 题,把之前查阅的一些资料和自己解决这个问题的方法纪录在此,一是为大家遇到此问题时提供一份资料,二是作为自己的笔记.过多的话就不多说了,下面进入正 题. 一.首先介绍一下我遇到这个问题时文本框的样式情况:  上图为Chrome浏览器为表单中的文本框自动填充黄色背景色的样子, 我自己为文本框加的,获得焦点后,周围有蓝色阴影. <input

关于jQuery表单选择中prop和attr的区别。

今天用jQuery学习表单这一章节的内容,再次遇到表单全选时,不能进行第二次全选的情况.反复查看测试仍然找不到是什么原因.后来在网上查到原来是jQuery1.6以后的版本用到的是prop.用attr的话不会多次实现,因为attr不会记录当前checkbox的选中状态. 表单这一章节内容让我感觉到有点吃力,总之好好努力吧! 以下是代码说明: <!DOCTYPE html> <html lang="en"> <head> <meta charset

改变表单文本框的大小

form表单的文本框不合适,所以想要改变大小. 一开始百度有人说在input里边加上size,赋值就可以了,我试了一下,这样只能改变文本框的高,不能改变长. 所以又百度了一下,原文网址着这里 http://www.jb51.net/css/154225.html 具体的内容是这样的 <form action="" method="get"> <input type="text" style="width:300px;h

AngularJS进阶 三 HTML 让表单 文本框只读,不可编辑的方法

HTML:让表单.文本框只读,不可编辑的方法 有时候,我们希望表单中的文本框是只读的,让用户不能修改其中的信息,如使<input type="text" name="input1" value="中国"> 的内容,"中国"两个字不可以修改.实现的方式归纳一下,有如下几种. 方法1: onfocus=this.blur() <input type="text" name="inpu

表单 -文本框之前或之后添加文本或按钮

样式: *现代浏览器的最新版都支持inline-block,只有ie6.7不支持inline-block,但ie6.7可以通过 display:inline:zoom:1:来模拟. *firefox,safari,opera,ie8+中的 inline-block 元素之间会莫名其妙多出3px的间距,其实这个是换行符,可以在inline-block的父元素中加上 font-size:0:来去掉inline-block元素之间的空隙. *white-space: nowrap;   设置如何处理元

判断表单文本框(最后点击按钮才判断)

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> label { display: inline-block; width: 80px; text-align: right; } span { color: red; } </style>