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. vCenter orchestrator使用范例

  2. C#的ThreadStart 和 Thread

    多线程,new Thread(t1);和new Thread(new ThreadStart(t1));有什么区别 没有区别. 前者,是c#的语法.也就是说是编译器帮你改写为第二种形式. 因此你要搞清 ...

  3. Android学习笔记五：四大组件（转）

    转自:http://blog.csdn.net/shenggaofei/article/details/52450668 Android四大组件分别为activity.service.content ...

  4. 玩转Bootstrap

    一:bootstrap基本模版 <!DOCTYPE html> <html lang="en"> <head> <meta charset ...

  5. GIT服务器实现web代码自动部署

    之前在一台vps服务器上面搭建了Git服务器,用来做代码管理,方便团队开发.但是问题也就相应的来了,使用git可以轻松的上传代码,而由于做的是web开发,每次还都得到服务器上把代码手动pull或者复制 ...

  6. java 如何对由json对象构成的数组形式的字符串进行遍历？

      1.情景展示 现在已知字符串为: [{"name":"微微笑","img":"http://zos.alipayobjects ...

  7. Echarts柱状图的点击事件

    最近在做一些图表统计的功能,用到了百度的开源图表软件Echatrs,不得不提的是:不但上手简单而且扩展功能也是十分强大.在使用的过程中也遇到了不少问题,可能由于有关Echatrs的资料并不是很齐全,所 ...

  8. javascript之QUnit单元测试

    一.javascript也需要单元测试吗? 这里我并不知道你有没有开发过大型的javascript项目,至今我开发过三个大型的js项目,分为是<课程节点树管理>.<在线制作试卷> ...

  9. txt文件匹配脚本

    # -*- coding:utf-8 -*- import time start = time.clock() data=open("Data.txt","r" ...

  10. JS修改当前控件样式&为控件追加事件

    先搁这吧,今天太晚了,以后再加注释和修整吧.不幸搜到的朋友就别看了 <%@ Page Language="vb" AutoEventWireup="false&qu ...