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. WireShark开启IP, TCP，UDP校验和的办法

    首先点击编辑->首选项

  2. Influxdb数据压缩

    环境: CentOS6.5_x64InfluxDB版本:1.1.0 数据压缩可以参考: https://docs.influxdata.com/influxdb/v1.1/concepts/stora ...

  3. 【超精简JS模版库/前端模板库】原理简析 和 XSS防范

    使用jsp.php.asp或者后来的struts等等的朋友,不一定知道什么是模版,但一定很清楚这样的开发方式: <div class="m-carousel"> < ...

  4. 表访问方式---->全表扫描（Full Table Scans, FTS）

    全表扫描(Full Table Scans, FTS) 全表扫描是指Oracle在访问目标表里的数据时,会从该表所占用的第一个区(EXTENT)的第一个块(BLOCK)开始扫描,一直扫描到该表的高水位 ...

  5. Solidworks 2016中导出URDF文件

    安装SolidWorks to URDF exporter插件 下载SolidWorks to URDF Exporter插件后按照网站上的步骤进行安装(目前该插件已经在Win 7 64位系统+Sol ...

  6. 转 php安装错误configure: error: Please reinstall the libcurl distribu

    今天配置一台server的php支持curl的时候, 出现如下报错 checking for cURL in default path... not foundconfigure: error: Pl ...

  7. Spring Cloud Dalston.SR5 BUG一记

    使用Dalston.SR5版本的Zuul时, 发现Ribbon重试不能切换服务实例, 换成Edgware.SR3,同样的配置可以切换实例进行重试 还有个不升级所有Spring Cloud组件的方法,仅 ...

  8. 一种通过MQ使缓存和数据库同步的玩法

    其他相关玩法 可以搜索 mysql 和 redis 结合使用

  9. quartz.net 的配置文件资料

    java版本的文档比较全 http://www.quartz-scheduler.org/documentation/quartz-2.x/configuration/ConfigPlugins.ht ...

  10. How to Land your Dream Job

           今天在code school上面看到一个外国人写的文章,写的很棒,瞧一下外国人的思维和我们有什么不同?分享给所有的朋友       You know how some things ar ...