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. 在TQ2440开发板上ping 127.0.0.1不通

    问题:在TQ2440上ping 127.0.0.1,提示错误 ping: sendto: Network is unreachable   解决方法:ifconfig lo 127.0.0.1 up ...

  2. Java的一个关于“星球”的枚举

    public enum Planet { /** * 水星 */ MERCURY(3.302e+23, 2.439e6), /** * 金星 */ VENUS(4.869e+24, 6.052e6), ...

  3. SQL Server 2012 无人值守安装（加入新实例）

    方法1,通过指定条个參数安装 setup.exe /Q /IACCEPTSQLSERVERLICENSETERMS /ACTION=install /PID=<validpid> /FEA ...

  4. IF函数

    语法:IF(logical_test,value_if_true,value_if_false) logical_test:表示计算结果为 TRUE 或 FALSE 的任意值或表达式 value_if ...

  5. redmine3.3基于bitnami集成快速安装

    形而上学,此景此情,古今一般同!好的东西,逢人喜!redmine在当下还是不错的. 源码安装redmine,相对复杂基于ruby运行的!化繁为简实!追究极致万物! 00.环境及软件说明 bitnami ...

  6. Ubuntu与Windows7双系统下, 系统时间不一致的问题

    Ubuntu使用的UTC时间, 而Windows使用的是Local Time, 就导致每次切换系统后, Windows时间都会正好晚8个小时. 有两种解决办法, 一个是修改Ubuntu, 另一个是修改 ...

  7. 转:Linux网卡驱动程序编写

    Linux网卡驱动程序编写 [摘自 LinuxAID] 工作需要写了我们公司一块网卡的Linux驱动程序.经历一个从无到有的过程,深感技术交流的重要.Linux作为挑战微软垄断的强有力武器,日益受到大 ...

  8. Linux 中的网络数据包捕获

    Linux 中的网络数据包捕获 Ashish Chaurasia, 工程师 简介: 本教程介绍了捕获和操纵数据包的不同机制.安全应用程序,如 VPN.防火墙和嗅探器,以及网络应用程序,如路由程序,都依 ...

  9. 浅谈ELK日志分析平台

    作者:珂珂链接:https://zhuanlan.zhihu.com/p/22104361来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 小编的话 “技术干货”系列文章 ...

  10. 调用布局View的performClick()方法

    修改之前的xml片段.             <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/an ...