1.场景：如下图，当选择定期存款时，输入框右边出现红色的必输项星号，当选择活期存款时，不再出现该星号。

2.思路一：不使用knockout，直接用click事件，就可以实现这个需求，代码如下：

<html>

<head>

</head>

<body  >

  <input id="Radio3" name="rdoCunKuanType" data-bind="checked:CunKuanType" onclick="document.getElementById('f1').style.display = 'inline'" value="H" checked type="radio" />活期存款 

  <input id="Radio4" name="rdoCunKuanType" data-bind="checked:CunKuanType" onclick="document.getElementById('f1').style.display = 'none'" value="D" type="radio">定期存款

  <br />定期几年：<input  type="text" />年 <font id="f1" color="red">*</font>

</body>

</html>

　　

3.思路二：使用Knockout的click事件及监控属性.
代码如下：

htm

<head>

   <script src="../lib/require/require.js" data-main="ko1_radio3_main"></script>

</head>

<body  >

  <input id="Radio3" name="rdoCunKuanType" data-bind="checked:CunKuanType,click:RadioClick" value="H" checked type="radio" />活期存款 

  <input id="Radio4" name="rdoCunKuanType" data-bind="checked:CunKuanType,click:RadioClick" value="D" type="radio">定期存款

  <br />定期几年：<input type="text" />年 <font data-bind="visible:ShowStar" color="red">*</font>

</body>

</html>

js

require.config({

    paths: {

        "knockout": "../lib/knockout/knockout-2.3.0",

        "jquery": "../lib/jquery/jquery-1.9.1.min"

    }

});

require(['jquery', 'knockout'], function ($, ko) {

    //数据绑定

    $(document).ready(function () {

        var viewModel = {

            CunKuanType: ko.observable("H"),

            ShowStar: ko.observable(false), //汇往国家及地区星号显示标示符

            RadioClick: function () {

                if (viewModel.CunKuanType() == "D") {

                    viewModel.ShowStar(true);

                }

                else {

                    viewModel.ShowStar(false);

                }

                return true;

            }

        };

        ko.applyBindings(viewModel);

    });

});

需要注意的是，RadioClick最后一定要返回一个true，否则click事件无效。

4.思路三：完全不用click事件，纯粹用监控依赖属性就可以搞定.

这个最符合Knockout所主张的思想了，一个属性变了，它本身并不引发操作，而是利用监控它也就订阅它的方法自动引发操作，不必再写click了，代码如下：

htm

<html>

<head>

   <script src="../lib/require/require.js" data-main="ko1_radio1_main"></script>

</head>

<body  >

  <input id="Radio1" name="rdoCunKuanType" data-bind="checked:CunKuanType" value="H" checked type="radio" />活期存款 

  <input id="Radio2" name="rdoCunKuanType" data-bind="checked:CunKuanType" value="D" type="radio">定期存款

  <br />定期几年：<input type="text" />年 <font data-bind="visible:ShowStar" color="red">*</font>

</body>

</html>

js

require.config({

    paths: {

        "knockout": "../lib/knockout/knockout-2.3.0",

        "jquery": "../lib/jquery/jquery-1.9.1.min"

    }

});

require(['jquery', 'knockout'], function ($, ko) {

    //数据绑定

    $(document).ready(function () {

        var viewModel = {

            CunKuanType: ko.observable("H")

        };

        viewModel.ShowStar = ko.dependentObservable(function ()

        {

            if (viewModel.CunKuanType() == "H")

            {

                return false;

            }

            else

            {

                return true;

            }

        }, viewModel);

        ko.applyBindings(viewModel);

    });

});

Knockout: radio选项切换引发click事件的一点总结的更多相关文章

  1. 导航栏图标切换：click事件，hover事件

    最近再做一个基于angular6的项目,导航栏需求:1.hover切换图标 2.click切换图标 先用jquery实现功能,在在angular组件里面实现. demo如下: <!DOCTYPE ...

  2. jquery单选框radio绑定click事件实现和是否选中的方法

    使用jquery获取radio的值,最重要的是掌握jquery选择器的使用,在一个表单中我们通常是要获取被选中的那个radio项的值,所以要加checked来筛选,比如有以下的一些radio项: 1. ...

  3. jquery单选框radio绑定click事件实现方法

    本文实例讲述了jquery单选框radio绑定click事件实现方法.分享给大家供大家参考. 具体实现方法如下: 复制代码代码如下: <html><head><title ...

  4. JQuery触发radio或checkbox的change事件

    在JQuery中,当给radio或checkbox添加一个change事件时,如果它的值发生变化就会触发change事件;本文将详细介绍如何利用JQuery触发Checkbox的change事件需要了 ...

  5. appium遇到click事件，提示"w3cStatus":400

    1.小米手机被开发借用后归还,使用该手机再进行自动化,发现appium遇到click事件,返回400 2.当时未想到是要在手机侧进行开发者选项-调试权限的设置 3.一直以为是appium的问题,app ...

  6. click事件和jquery选项卡

    一. click事件 实现效果是点击切换按钮,可以重复的切换背景色 <!DOCTYPE html> <html lang="en"> <head> ...

  7. 发现：Click事件也能获取鼠标单击的坐标

    按照MSDN的说明以及平时的习惯,我们要获取鼠标单击时的相对坐标,都会使用MouseClick等事件,今天,偶然发现,原来Click事件也可以. /* 惊天地泣鬼神的考古业绩. * 原来Cilck事件 ...

  8. 下拉选择的blur和click事件冲突了

    当写个下拉选择框时我们希望当input失去焦点时,下拉框消失,或者当选择下拉框中的内容的同时将内容填入input并且使下拉框消失. 这时候我们会想到blur和click,单独使用的时候是没有问题的,但 ...

  9. jquery给label绑定click事件被触发两次解决方案

    首先我们看下面的代码片段(label包裹checkbox) <div class="example"><label for="chk_6" c ...

随机推荐

  1. Tomcat下HTTPS双向认证配置以及客户端调用案例

    1:生成服务器端的keystore和truststore文件 (1)以jks格式生成服务器端包含Public key和Private Key的keystore文件 keytool -genkey -a ...

  2. NGINX proxy_pass 域名解析问题

    前两天发现一个问题,当使用proxy_pass的时候,发现域名对应IP是缓存的,这样一旦VIP变化之后,就会报错,下面就来详细分析一下这个问题. 一.问题说明 location = /test { i ...

  3. python乱码问题之爬虫篇

    UnicodeDecodeError: 'gbk' codec can't decode byte 0xae in position 167: illegal multibyte sequence 使 ...

  4. 【 D3.js 入门系列 — 11 】 入门总结

    D3 新专题首页 一转眼,这个入门系列已经积累了二十二篇文章之多,我想作为 D3.js 这款数据可视化工具的入门来说已经足够了.相信仅仅要看完本系列.以后全然能够在辅以查询的情况下完毕大部分可视化工作 ...

  5. JavaBean与XML转换——XStream使用笔记

    转载请注明原文地址:http://www.cnblogs.com/ygj0930/p/6648131.html  一:View层与Control层的数据交互 做过Web项目的人都知道,当对一个requ ...

  6. Spring Boot 启动载入数据 CommandLineRunner

    实际应用中,我们会有在项目服务启动的时候就去载入一些数据或做一些事情这种需求. 为了解决这种问题.Spring Boot 为我们提供了一个方法.通过实现接口 CommandLineRunner 来实现 ...

  7. Echarts折线图点击事件

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  8. 饭后来份TempData，瞅瞅有啥料

    原本打算写一篇关于.NET下的分布式缓存的随笔,但是为了举一个实际的运用,就想把控制器(是ASP.NET MVC的)中的Session替换成使用分布式缓存来实现.如果你的网站最后是需要负载均衡的话,这 ...

  9. RHEL7 在不同的环境中使用不同的网络配置文件

    比如,我们可以设置RHEL7 系统在公司时使用一个网卡配置文件:在家时则使用另外一个配置文件(可以根据不同的环境设置多个网卡配置文件). 网卡配置信息如下: [root@rhel7 ~]# nmcli ...

  10. http协议请求方法

    解析HTTP协议六种请求方法get.put.post.delete.options和trace含义与区别. 1.GET   selecr请求会向数据库发索取数据的请求,从而来获取信息,该请求就像数据库 ...