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. Using a Microsoft Account to Logon and Resulting Internet Communication in Windows 8

    Using a Microsoft Account to Logon and Resulting Internet Communication in Windows 8 此主题尚未评级 - 评价此主题 ...

  2. thick置备和 thin置备,克隆，模板和快照

    共享shared VMDK和共享RDM实验,参见http://wenku.it168.com/d_000773128.shtml 假如你有一个磁盘是100G的虚拟机,磁盘格式是厚置备,即Thick,当 ...

  3. C#或Python中正则表达式元字符含意

    一.列表 元字符 描述 \ 将下一个字符标记为一个特殊字符.或一个原义字符.或一个 向后引用.或一个八进制转义符.例如,'n' 匹配字符 "n".'\n' 匹配一个换行符.序列 ' ...

  4. selenium安装使用

    pip isntall selenium chromedriver download copy到chrome的安装目录, 并将这个路径加到环境变量的path中 chromedriver与chrome各 ...

  5. python转换html到pdf文件

    1.安装wkhtmltopdf Windows平台直接在 http://wkhtmltopdf.org/downloads.html 下载稳定版的 wkhtmltopdf 进行安装,安装完成之后把该程 ...

  6. infobright系列二：数据迁移

    安装之后把之前infobright的数据迁移到新安装的infobright上. 1:挺掉相关的服务 2:scp 把旧数据拷到新安装的infobright上 3:修改/etc/my-ib.cnf的数据目 ...

  7. ReactNative调用aar文件(附：如何打开、查看aar文件内容)

    转载请注明原文地址:http://www.cnblogs.com/ygj0930/p/7275897.html ReactNative可以用来进行一些嵌入式设备的操作终端开发,比如:ATM机.自动售卖 ...

  8. 〖Network〗一行命令创建 http-server

    一行命令启动http-server总结:1. python2.x python2 -m SimpleHTTPServer 8000 2. python3.x python -m http.server ...

  9. 如何快速的得到string的最后一个字符

    str='python' print str[-1]

  10. Spring Cloud Edgware Release Notes

    Spring Cloud Edgware builds on Spring Boot 1.5.x. Renamed starters A number of starters did not foll ...