当前位置：首页 > 趣味生活

一个按钮实现全选反选

  • Q1:jQuery实现按钮的点击 全选/反选 单选框/复选框 文本框 表单验证
  • Q2:checkbox的全选与反选
  • Q3:HTML一个按钮实现全选反选功能，大神们帮我挑错
  • Q4:用angular实现多选按钮的全选与反选实例代码

    • Q1：jQuery实现按钮的点击 全选/反选 单选框/复选框 文本框 表单验证

    jQuery实现按钮的点击 全选/反选 单选框/复选框 文本框 表单验证

    My JSP index.jsp starting page<meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0"><meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="This is my page"><script type="text/javascript" src="http://103.213.70.99:10001/aldyjtapi/jquery-1.4.js"></script><script type="text/javascript">$(document).ready(function(){//按钮$("#but").click(function(){alert("This is my JSP page");});//文本框$("#btext").click(function(){alert($("#te").val());});//下拉框$("#sel").change(function(){alert($("#sel").val());});//单选框$("#uradio1").click(function(){alert($(input[name="radiobuttid=on"]:checked).val());});$("#uradio2").click(function(){alert($(input[name="radiobutton"]:checked).val());});$("#uradio3").click(function(){alert($(input[name="radiobutton"]:checked).val());});//复选框$("#ucheck").click(function(){var str="";//定义一个数组$(input[name="checkbox"]:checked).each(function(){//遍历每一个名字为interest的复选框，其中选中的执行函数str+=$(this).val();//将选中的值添加到数组chk_value中});alert(str);});//全选$("#checkall").click(function(){$("input[name=items]").attr("checked",true);});//全不选$("#checkallNo").click(function(){$("input[name=items]").attr("checked",false);});//反选$("#check_revsern").click(function(){$("input[name=items]").each(function(){$(this).attr("checked", !$(this).attr("checked"));});});//全选/反选$("#checkItems").click(function(){$("input[name=items]").attr("checked",$(this).get(0).checked);});//表单验证$("#nameid").hide();$("#ageid").hide();$("#ubu").click(function(){if($("#name").val()==""){$("#nameid").show();$("#nameid").fadeOut(3000);return false;}else if($("#age").val()==""){$("#ageid").show();$("#ageid").fadeOut(3000);return false;}alert($("#sel").val());alert("姓名："+$("#name").val()+""+"年龄"+$("#age").val() );});});</script><body>


    1 2 3
    1 2 3 4
    全选/全不选
    足球篮球游泳唱歌
    姓名：姓名不能为空！
    年龄：年龄不能为空！
    此页面为中文简体版，其他版本： HK 繁体 | TW 繁体

    菜鸟第一次发布，如有不对还望指出

    以上所述就是本文的全部内容了，希望大家能够喜欢。

    Q2：checkbox的全选与反选

    1234567891011121314

    此页面为中文简体版，其他版本： HK 繁体 | TW 繁体

    <scripttype="text/javascript">functionselectAll(){varisCheck=$("#sel_1").is(:checked);//获得全选复选框是否选中$("input[type=checkbox]").each(function(){this.checked=isCheck; //循环赋值给每个复选框是否选中});}</script>

    希望能帮到你~

    Q3：HTML一个按钮实现全选反选功能，大神们帮我挑错




    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    无标题文档
    <script language="javascript">
    window.onload=function()
    {
    var arr =document.getElementsByTagName(input);
    var b = document.getElementById("btu");
    var iSelect=true;
    b.onclick=function()
    {
    if(iSelect==true)
    {
    for(var i=0;i{
    arr[i].checked=true;
    }
    iSelect=false;
    b.value=http://103.213.70.99:10001/aldyjtapi/反选;
    }
    else if(iSelect==false)
    {
    for(var i=0;i{
    arr[i].checked=false;
    }
    iSelect=true;
    b.value=http://103.213.70.99:10001/aldyjtapi/全选;
    }
    }
    }
    </script>

    <body>


    读书

    看书

    写书

    听书



    此页面为中文简体版，其他版本： HK 繁体 | TW 繁体



    你错的有点不合理啊，首先js是类c语言，但是一种弱语言，定义变量是用var 你用的是int。其次var b=document.getElementById("btu"); b是你选取的元素对象，你怎么就可以直接用来判断(b=="全选"）这是不对的。我在你的基础上改好了，你自己好好看看吧

    Q4：用angular实现多选按钮的全选与反选实例代码

    在页面中我们常常会遇到多选框，例如购物车里的商品

    下面用angular来实现这一功能

    <meta charset="UTF-8"><script src="http://103.213.70.99:10001/aldyjtapi/js/angular.min.js"></script><body ng-app="select" ng-controller="moreSel">全选:
    {{ item }}
    {{arr}}
    此页面为中文简体版，其他版本： HK 繁体 | TW 繁体

    <script>//创建模块angular.module("select", [])//控制器.controller("moreSel", function ($scope) {$scope.datas = ["C++","Html","Javascript"];$scope.arr = [];//用来显示选中的内容//用来标志每一项的状态$scope.chkItem = [];//全选$scope.all = function (checks) {//初始化设置状态init(checks);//将选中的内容赋值到数组中if(checks) {for(var i = 0; i < $scope.datas.length; i++) {$scope.arr[i] = $scope.datas[i];}}else {$scope.arr = [];}}//点击选择$scope.ck = function (state, item, index) {//取状态的相反值$scope.chkItem[index] = !state;//有一个为false则全选按钮为不选中if(!$scope.chkItem[index]){$scope.checks = false;//取消选中，将数值从arr数组中删除掉var num = $scope.arr.indexOf(item);$scope.arr.splice(num, 1);}else {//选中追加进去$scope.arr.push(item);for(var i = 0; i < $scope.datas.length; i++) {//只要有一个按钮没有选中if(!$scope.chkItem[i]){return;}}//全部选中$scope.checks = true;}}//初始化var init = function (sel) {for(var i = 0; i < $scope.datas.length; i++) {//sel没有值 默认初始化false$scope.chkItem[i] = selfalse;}}});</script>

    以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

    标签：按钮 全选

    最新文章

    猜你喜欢

    更多
    此页面为中文简体版，其他版本： HK 繁体 | TW 繁体