单选框

CreateTime--2017年5月15日11:40:04
Author:Marydon

一、实现点击文字,选中对应按钮的两种方式

  1.label标签体包住单选框标签

  

  2.label标签体只包住文本

二、单选框的onchange事件

说明:

  1.通过点击不同的单选框选项,来实现其他内容的显示或隐藏;

  2.$get(‘id‘)是对document.getElementById(‘id‘)的封装。

<tr>
    <td class="tdbiejing">是否替诊</td>
    <td>
        <label class="radioCss">
            <input name="REPLACE_TZ" type="radio" value="0" onchange="$get(‘displayName‘).style.display=‘‘;"/>
                                                        是
        </label>
        <label class="radioCss">
            <input name="REPLACE_TZ" type="radio" value="1" checked onchange="$get(‘displayName‘).style.display=‘none‘;"/>
                                                        否
        </label>
    </td>
</tr>
<tr id="displayName" style="display: none;">
    <td class="tdbiejing">替诊医生名称</td>
    <td>
        <input type="text" class="TextBox" id="DOCTOR_NAME_TZ" name="DOCTOR_NAME_TZ"/>
        <input type="hidden" name="DOCTOR_ID_TZ" id="DOCTOR_ID_TZ" value=""/>
    </td>
    <td class="tdbiejing"></td>
    <td></td>
</tr> 

  注意:

    1.同一组单选框必须使用同一个name;

    2.同一组的每个单选框都得绑定onchange事件。

时间: 2024-10-08 12:18:13

单选框的相关文章

[CSS揭秘]自定义单选框和复选框

很多Web前端工程师肯定都会遇到过,在项目中,UI设计师跑来跟你说,我这个地方的表单控件需要设计成这个样子那个样子.但是用CSS却不能够修改这些控件的默认样式,于是乎,只能通过div+javascript技术来进行模拟.特别是在如今移动端的崛起时代,更加注重用户的体验.于是就更加需要这样一种hack技术. 如果对如今的前端框架有过了解,都会知道组件这个概念.那么在这些框架中,都会提供一些单选框或复选框按钮组件.可见大家之前受到表单元素的默认样式的毒害有多深. 今天先给大家简单介绍一下如何通过CS

学习15 单选框/多选框标签

<!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>单选框/复选框</title> </head> <body> <form action="save.php" method="p

vue.js实现单选框、复选框和下拉框

Vue.js可以很方便的实现数据双向绑定,所以在处理表单,人机交互方面具有很大的优势.下边以单选框.复选框和下拉框为例介绍他们在HTML和Vue.js中的具体实现方式. 一.单选框 在传统的HTML中实现单选框的方法如下: <div id="app"> <input type="radio" name="gender" value="man" id="man"/><label

单选框与复选框的实现

<?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.hanqi.test5"> <application android:allowBackup="true" android:icon=&q

jquery获取表格中动态单元格内单选框和多选框的值

1.通过table的Id获取到每行(tr)的元素, $("#table_xuan tr") 如果过滤第一行和最后一行 $("#table_xuan tr:not(:first):not(:last)") 2.通过 each()函数遍历 每一行 $("#table_xuan tr").each(function(i)){ // i 代表的是行数 $(this).children("td").each(function(j)){

android 单选框和复选框

<?xml version="1.0" encoding="utf-8"?> <TableLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_heig

android开发入门之单选框的基本应用

随着android手机越来越火,android操作系统也深受开发者的喜爱,很多程序员慢慢转行做android开发.今天麦子学院的android开发老师给大家讲讲android单选框基本应用,今天我们跟着麦子学院android老师学习Android单选框的实现方式. ●使用Android单选框的时候,要用RadioGroup来分组 ●选择RadioGroup里的单选框的时候,将调用RadioGroup的Check·()方法 ●追加单选框被选择时处理的时候, 1.调用setOnCheckedChan

工作积累(八)——AngularJS与单选框及多选框的双向动态绑定

AngularJS 在 <input type="text" /> 中实现双向动态绑定十分简单,如下所示: <input type="text" ng-model="topic.title" /> 只需要用ng-model 与 $scope 中的属性对应,即实现了type="text" 的双向动态绑定.当 <input type="radio" /> 及 <inpu

AngularJS单选框及多选框实现双向动态绑定

在AngularJS中提及双向数据绑定,大家肯定会想到ng-model指令. 一.ng-model ng-model指令用来将input.select.textarea或自定义表单控件同包含它们的作用域中的属性进行绑定.它将当前作用域中运算表达式的值同给定的元素进行绑定.如果属性不存在,它会隐式创建并将其添加到当前作用域中. 始终用ng-model来绑定scope上一个数据模型内的属性,而不是scope上的属性,这可以避免在作用域或后代作用域中发生属性覆盖! <input type="te

JSP——单选框,下拉选框

单选框: 性别:男<input type="radio" name="sex" value="0" onclick="show();">女<input type="radio" name="sex" value="1" checked onclick="hidd();" 1.在Html的空间中的input标签中有type属性,将该