亚洲必赢登录 > 亚洲必赢app > 代码笔记,一个数值保存复选框的值

原标题:代码笔记,一个数值保存复选框的值

浏览次数:78 时间:2019-12-01

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Todo</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <script src="lib/ionic/js/ionic.bundle.js"></script>
    <!-- 在使用 Cordova/PhoneGap 创建的 APP 中包含的文件,由 Cordova/PhoneGap 提供,(开发过程中显示 404) -->
    <script src="js/app2.js"></script>
    <script src="cordova.js"></script>
    <link href="http://www.runoob.com/static/ionic/css/ionic.min.css" rel="stylesheet">
    <script src="http://www.runoob.com/static/ionic/js/ionic.bundle.min.js"></script>
</head>

<body>
    <div class="range">
        <i class="icon ion-volume-low"></i>
        <input type="range" name="volume">
        <i class="icon ion-volume-high"></i>
    </div>
    <div class="list" style="margin-top:13px">
        <div class="ltem item-divider">
            Range In A List.
        </div>
        <div class="item range range-positive">
            <i class="icon ion-ios-sunny-outline"></i>
            <input type="range" name="volume" min="0" max="100" value="12">
            <i class="icon ion-ios-sunny"></i>
        </div>
        <div class="item range range-calm">
            <i class="icon ion-ios-lightbulb-outline"></i>
            <input type="range" name="volume" min="0" max="100" value="25">
            <i class="icon ion-ios-lightbulb"></i>
        </div>
        <div class="item range range-balanced">
            <i class="icon ion-ios-bolt-outline"></i>
            <input type="range" name="volume" min="0" max="100" value="38">
            <i class="icon ion-ios-bolt"></i>
        </div>
        <div class="item range range-energized">
            <i class="icon ion-ios-moon-outline"></i>
            <input type="range" name="volume" min="0" max="100" value="50">
            <i class="icon ion-ios-moon"></i>
        </div>
        <div class="item range range-assertive">
            <i class="icon ion-ios-partlysunny-outline"></i>
            <input type="range" name="volume" min="0" max="100" value="63">
            <i class="icon ion-ios-partlysunny"></i>
        </div>
        <div class="item range range-royal">
            <i class="icon ion-ios-rainy-outline"></i>
            <input type="range" name="volume" min="0" max="100" value="75">
            <i class="icon ion-ios-rainy"></i>
        </div>
        <div class="item range range-dark">
            <i class="icon ion-ios-lightbulb-outline"></i>
            <input type="range" name="volume" min="0" max="100" value="88">
            <i class="icon ion-ios-lightbulb"></i>
        </div>
    </div>
</body>

</html>

前言

在开荒进度中,对于网页中的多选,大家有很三种积累方式,平淡无奇的如逗号分隔。下文介绍一种通用设计方式:用八个大背头来累积复选框的值。


                   close(卡塔尔国(Socket.close(卡塔尔卡塔尔(英语:State of Qatar) 关闭连接

参谋资料:《生手教程》

二,代码。

参谋资料:《生手教程》

设计

将多项的选项值分别设置为 2 的 n 次方,n 从 0 初阶,每多后生可畏项,n + 1。即 1,2,4,8...
多选的存款和储蓄值为每一样值之和,如选中了第 1、3 项,则值为:1 + 4 = 5


       事件: open (Socket.onopen卡塔尔国   连接创建成功时接触(能够开展数据传输)

图片 1

参谋资料:《生手教程》

图片 2

回显

借使存款和储蓄的值为 5 ,要使相应的项被勾选,则是循环多项的值,每项与积累值 5 进行 位与运算代码笔记,一个数值保存复选框的值。,如若值与选拔本人的值分外,则当选该项;相反地,要是运算值为 0 ,则设置为不选中:

1 & 5 = 1
2 & 5 = 0
4 & 5 = 4
8 & 5 = 0

         服务器发起关闭: 由服务器向客户端发起断开连接的倡议,那么些央求能够传输一些音信过来,比如状态码,客商端会触发close事件,此时就足以调用close(卡塔尔国来断开连接了

 

图片 3

图片 4

预备知识 —— 位与运算

位与运算:二进制运算,相像位的五个数字都为1,则为1;若有叁个不为1,则为0,如:

   00101
&  11100
------------
   00100

                  close (Socket.close卡塔尔   连接关闭成功时接触

二,代码。

一,效果图。

二,代码。

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Checkbox Test</title>
</head>
<body>

<form>
    <input type="checkbox" name="test" value="1"> 1
    <input type="checkbox" name="test" value="2"> 2
    <input type="checkbox" name="test" value="4"> 4
    <input type="checkbox" name="test" value="8"> 8
</form>

<input type="text" id="result" placeholder="设置要回显的值">
<button id="show">回显</button>

<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script>
    $(function () {
       $("[name='test']").on("change", function () {
           var result = 0;
           $("[name='test']:checkbox:checked").each(function(){
               result += parseInt($(this).val());
           });
           $("#result").val(result);
       });

       $("#show").on("click", function () {
           var result = parseInt($("#result").val());
           $("[name='test']:checkbox").each(function(){
               var value = parseInt($(this).val());
               if ((result & value) == value) {
                   $(this).prop("checked", true);
               } else {
                   $(this).prop("checked", false);
               }
           });
       });
    });
</script>
</body>
</html>

        WebSocket是单个TCP连接上实行全双工通讯的公约

图片 5

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Todo</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <script src="lib/ionic/js/ionic.bundle.js"></script>
    <!-- 在使用 Cordova/PhoneGap 创建的 APP 中包含的文件,由 Cordova/PhoneGap 提供,(开发过程中显示 404) -->
    <script src="js/app2.js"></script>
    <script src="cordova.js"></script>
    <link href="http://www.runoob.com/static/ionic/css/ionic.min.css" rel="stylesheet">
    <script src="http://www.runoob.com/static/ionic/js/ionic.bundle.min.js"></script>
</head>

<body>
    <!--实例-->
    <div class="tabs">
        <a class="tab-item">
    主页
</a>
        <a class="tab-item">
    收藏
    </a>
        <a class="tab-item">设置</a>
    </div>

   <!--图标选项卡-->
<div class="tabs tabs-icon-only">
    <a class="tab-item">
<i class="icon ion-home"></i>
    </a>
    <a class="tab-item">
<i class="icon ion-star"></i>

    </a>
    <a class="tab-item">
<i class="icon ion-gear-a"></i>
    </a>
</div>

 <!--顶部图标加文字选项卡-->
<div class="tabs tabs-icon-top">
    <a class="tab-item" href="#">
        <i class="icon ion-home"></i>
        主页
    </a>
    <a class="tab-item" href="#">
        <i class="icon ion-star"></i>
        收藏
    </a>
    <a class="tab-item" href="#">
        <i class="icon ion-gear-a"></i>
        设置
    </a>
</div>

 <!--左侧图标加文字选项卡-->
 <div class="tabs tabs-icon-left">
    <a class="tab-item">
        <i class="icon ion-home"></i>
        主页
    </a>
    <a class="tab-item">
        <i class="icon ion-star"></i>
        收藏
    </a>
    <a class="tab-item">
        <i class="icon ion-gear-a"></i>
        设置
    </a>
 </div>


<!--条纹样式选项卡-->
<div class="tabs-striped tabs-top tabs-background-positive tabs-color-light">
    <div class="tabs">
      <a class="tab-item active" href="#">
        <i class="icon ion-home"></i>
        Test
      </a>
      <a class="tab-item" href="#">
        <i class="icon ion-star"></i>
        Favorites
      </a>
      <a class="tab-item" href="#">
        <i class="icon ion-gear-a"></i>
        Settings
      </a>
    </div>
  </div>
  <div class="tabs-striped tabs-color-assertive">
    <div class="tabs">
        <a class="tab-item active" href="#">
            <i class="icon ion-home"></i> Test
        </a>
        <a class="tab-item" href="#">
            <i class="icon ion-star"></i> Favorites
        </a>
        <a class="tab-item" href="#">
            <i class="icon ion-gear-a"></i> Settings
        </a>
    </div>
</div>










</body>

</html>

本文由亚洲必赢登录发布于亚洲必赢app,转载请注明出处:代码笔记,一个数值保存复选框的值

关键词:

上一篇:没有了

下一篇:ajax文件上传,js中的七十九线程