用JavaScript实现按钮点击全选和下拉列表根据省份复选框显示对应城市功能

我们直接来案例来研究实现按钮点击全选和下拉列表根据省份复选框显示对应城市功能

案例1：下面有两个省份，要求将他们写在下拉列表中，当选择省份好省份时，复选框出现对应省份的城市名（河南：郑州，开封，安阳，洛阳，商丘；河北：邯郸，邢台，石家庄，唐山，保定）

我们先写好HTML里页面的布局

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><select><option>--请选择省份--</option><option>河南省</option><option>河北省</option></select><select><option>--请选择城市--</option></select></body>
</html>

因为城市是实时跟着省份变化而变化，所以我们要在script标签中来进行复选框内容的显示操作，这里我们要给两个下拉框设置id并在省份那一个下拉框设置onchange下拉框选中事件，放入功能函数实现这个事件的内容

代码如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><select id="province" onchange="changeOpt()"><option>--请选择省份--</option><option>河南省</option><option>河北省</option></select><select id="cities"><option>--请选择城市--</option></select><script>function changeOpt() {//创建一个数组var array = new Array()//以二维数组将数组里的省份里分别放入对应省份的城市array['--请选择省份--'] = ['--请选择城市--']array['河南省'] = ['郑州', '开封', '安阳', '洛阳', '商丘']array['河北省'] = ['邯郸', '邢台', '石家庄', '唐山', '保定']//获取第一个下拉列表的内容var province = document.getElementById("province").value//定义变量str用于后面接收数据var str = ""for (var i = 0; i < array[province].length; i++) {//获取每次循环对应省份的二维数组的元素str+="<option value='"+array[province][i]+"'>"+array[province][i]+"</option>"//将每次获取到的二维数组元素放入下拉列表中document.getElementById("cities").innerHTML = str}}</script></body>
</html>

效果演示：

案例二：

请实现一下效果：

第一步还是要把HTML布局写好

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">ul {//将列表前的符号隐蔽display: contents;}</style></head><body><input type="checkbox" id="qx">全选<br><hr><ul class="shop"><li><input type="checkbox">苹果</li><li><input type="checkbox">李子</li><li><input type="checkbox">香蕉</li><li><input type="checkbox">西瓜</li><li><input type="checkbox">荔枝</li></ul></body>
</html>

我们写好之后顺便将全选按钮和水果的列表赋予id

下面就是要将用JavaScript使全选按钮和列表里的按钮进行绑定操作

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">ul {display: contents;}</style></head><body><input type="checkbox" id="qx">全选<br><hr><ul class="shop"><li><input type="checkbox">苹果</li><li><input type="checkbox">李子</li><li><input type="checkbox">香蕉</li><li><input type="checkbox">西瓜</li><li><input type="checkbox">荔枝</li></ul><script>//使用DOM对象的querySelectorAll方法通过对应选择器获取所有满足条件的标签var cbs = document.querySelectorAll(".shop input")//给全选按钮设置点击事件document.getElementById("qx").onclick = function() {获取到当前按钮的状态var isChecked = this.checked//获取全部input标签for (var i = 0; i < cbs.length; i++) {//将全选按钮的状态和列表所有按钮状态绑定在一起cbs[i].checked = isChecked}}</script></body>
</html>

现在便能实现一下效果：

我们看到虽然我们可以点击全选按钮全部选中所有水果，但是当我们将全部水果选中后全选按钮并没有被选择上，所有接下来也要让水果按钮全部被选中后，全选按钮也要被选中的状态

思路：当所有水果按钮被选中时，全部选择按钮也是被选中状态

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">ul {display: contents;}</style></head><body><input type="checkbox" id="qx">全选<br><hr><ul class="shop"><li><input type="checkbox">苹果</li><li><input type="checkbox">李子</li><li><input type="checkbox">香蕉</li><li><input type="checkbox">西瓜</li><li><input type="checkbox">荔枝</li></ul><script>//使用DOM对象的querySelectorAll方法通过对应选择器获取所有满足条件的标签var cbs = document.querySelectorAll(".shop input")//给全选按钮设置点击事件document.getElementById("qx").onclick = function() {获取到当前按钮的状态var isChecked = this.checked//获取全部input标签for (var i = 0; i < cbs.length; i++) {//将全选按钮的状态和列表所有按钮状态绑定在一起cbs[i].checked = isChecked}}//获取全部input标签for (var i = 0; i < cbs.length; i++) {//给所有input标签添加点击事件cbs[i].onclick = function() {//计数器计算被点击的次数var count = 0//遍历全部input标签for (var j = 0; j < cbs.length; j++) {//判断每个按钮是否被点击if (cbs[j].checked) {//如果点击count值自增1count++}}//如果count数值和cbs长度相等，代表所有水果按钮都被选中if (count == cbs.length) {//此时使全部选择按钮为被选中的状态document.getElementById("qx").checked = true} else {//否则使全部选择按钮为被未选中的状态document.getElementById("qx").checked = false}}}</script></body>
</html>

现在就能实现刚开始看到的效果，代码量一般，要多加练习

用JavaScript实现按钮点击全选和下拉列表根据省份复选框显示对应城市功能相关推荐

JavaScript的按钮点击事件绑定
JavaScript的按钮点击事件绑定: <!DOCTYPE html> <html lang="en"> <head><meta cha ...
复选框全选效果，根据单个复选框的选择情况确定全选复选框是否被选
复选框全选与全不选效果逻辑:复选框的checked属性与复选框全选效果对应起来,全选复选框checked:true 时,全部复选框checked:true: 全选框checked:false 时,全 ...
react实现全选和反选_react实现复选框全选和反选组件效果
本文实例为大家分享了react实现复选框全选和反选组件的具体代码,供大家参考,具体内容如下运行效果图如下: 代码: import React, { Component } from 'react'; ...
ztree 点击文字也可以选中前面的复选框
分享一个小方法,实现ztree 点击文字,也可以选中前面的复选框 radio 或者 checkbox 在设置树的时候,加上这句话 callback: { onClick: functio ...
用JavaScript实现按钮点击事件
开发工具与关键技术:DW软件,CSS3的函数的调用作者:陈隆撰写时间:2019年01月16日先创建一个HTML文件,把相关的布局写好到HTML中,把页面写好,写好之后把页面使用定位定好后使用di ...
FLASK中利用javascript实现按钮点击事件
1.建立js文件test.js function bindCaptchaBtnClick(){$("#captcha-btn").click(function(){alert(&q ...
vue设置多选框默认勾选_Vue实现全选和反选即Vue复选框增加全选功能
导语:Vue中单选下拉框开发起来非常简单,直接select包裹一个带v-for的option即可但是当我们想做个带多选的下拉框该怎么办呢?最简方法是什么?比如下面这个图: 如果网上搜的话,搜的是一堆 ...
ajax中怎样获取下拉列表,如何从Ajax/Jquery的下拉列表中获取复选框中的数据
这里是asnwer你可以做的是这样的 echo ''; echo 'Select User'; $sql = "SELECT * from users"; $res = mysql ...
元素的选中问题元素选中的问题切换复选框选中全选和全不选
元素的选中问题 <!DOCTYPE html> <html lang="en"> <head><meta charset="UT ...
JS 原生实现复选框全选反选功能
** JS 原生实现复选框全选反选功能 ** 按钮功能实现思路: 全选按钮: 直接将全选按钮的状态赋值给每一个复选框. 复选框:只有当所有的复选框选中时,全选按钮才能选中,所以每当复选框每点击一次就 ...

用JavaScript实现按钮点击全选和下拉列表根据省份复选框显示对应城市功能

用JavaScript实现按钮点击全选和下拉列表根据省份复选框显示对应城市功能相关推荐

最新文章

热门文章