关于复选框和单选框的事

很多时候我想会用到浏览器默认的单选按钮或者复选框,比如说偷懒的时候或者心情不好的时候╮(╯﹏╰)╭,

在html结构里我想实现点击文字旁边的单选按钮就跟着选中或反之,像这样:

html代码就可以这样写了:<label><input type="radio" />javascript</label>,通过label标签自动关联这个事件。

那么问题来了,如果是多个选项,我想点击其中的某个选项,其他的就默认不选中,该怎么写,复制上面的代码黏贴几行改了文字就行了吗,如果是我就不写下面的代码了,哈哈:

  <label><input type="radio" name="options" />javascript</label>
  <label><input type="radio" name="options" />Html5</label>
  <label><input type="radio" name="options" />css3</label>

我需要用name这个属性把他们都关联起来,这样就能实现想要的效果了:

有时候我想用js来控制复选框的选中状态,然后抄一下网上的句子:jQuery-比如用attr("checked")获取checkbox的checked属性时选中的时候可以取到值,值为"checked"但没选中获取值就是undefined。以前我们使用attr获取checked属性时返回"checked"和"",现在使用prop方法获取属性则统一返回true和false。比如,selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, 和defaultSelected应该使用.prop()方法获取/设置值,像这样:

    $(‘input[type=checkbox]‘).prop(‘checked‘)    //获取
    $(‘input[type=checkbox]‘).prop(‘checked‘,true)    //设置
    $(‘input[type=checkbox]‘).prop(‘checked‘,false)    //设置

    //相当于原生js:
    alert(document.querySelector(‘input[type=checkbox]‘).checked);
    document.querySelector(‘input[type=checkbox]‘).checked=true;
    document.querySelector(‘input[type=checkbox]‘).checked=false;

复选框事件:

假设页面上的复选框为为选中状态,当点击checkbox的时候,是先有点击事件呢还是先有checkbox变成true的事件,实践证明是浏览器先默认给checkbox的checked变成了true,然后再执行checkbox的点击事件的,所以想这样写就坑了╭∩╮(︶︿︶)╭∩╮:

时间: 2024-07-30 03:12:13

关于复选框和单选框的事的相关文章

Bootstrap 表单和图片 (内联表单,表单合组,水平排列,复选框和单选框,下拉列表,校验状态,添加额外的图标,控制尺寸,图片)

一.表单 基本格式 注:只有正确设置了输入框的 type 类型,才能被赋予正确的样式. 支持的输入框控件 包括:text.password.datetime.datetime-local.date.month.time.week. number.email.url.search.tel 和 color. <form> <div class="form-group"> <label>电子邮件</label> <input type=&

【mfc】组框、单选框控件与复选框控件

VC6中的MFC中的单选框与复选框控件也不简单,它没有VS中C#那样可以之间通过一个封装之后的函数进行判断,该单选框/复选框有没有被选中啊?或者控制单选框/复选框的选中状态.这东西比较复杂,通过相应的值来控制的. 一.基本目标 下面就用一个简单例子来说明VC6中的MFC中的单选框与复选框控件,点击"确定"按钮能够判断对话框中的所有单选框与复选框的选中状态.Radio1-Radio3互成一个组,组内仅能够有一个组员被选中,Radio4-Radio5也互成一组,选择Radio4能够令复选框

Jquery学习笔记:操作form表单元素之二(复选框和单选框)

在上面文章的基础上,我们介绍如何操作表单元素中的 复选框和单选框. 一.复选框 <label> <input type="checkbox" id="item" checked> 全选</label> 注意,input标签要放在label标签内,这样点击文字时也会有反映. 如果选中了,调用  $("#item").prop("checked")返回true,否则返回false 同样利用pro

把复选框变成单选框(prop,attr的区别)

如果项目中需要统一样式的话,有可能会遇到把复选框变成单选框的需求. 下面是用jquery的简单实现 $(function(){ $("input[type='checkbox']").click(function() { var flag = $(this).prop("checked"); //先记录下点击后应该的状态 $("input[type='checkbox']").prop("checked", false); $

jquery 根据后台传过来的值动态设置下拉框、单选框选中

jquery  根据后台传过来的值动态设置下拉框.单选框选中 1 $(function(){ 2 var sex=$("#sex").val(); 3 var marriageStatus=$("#marriageStatus").val(); 4 var education=$("#education").val(); 5 if(!isnull(sex)){ 6 //$("input:radio[name='sex'][value=&

自学篇之--js 提取复选框和单选框的值 和纯css的3D按钮

<html> <head> <meta charset="utf-8" content="text/htnl"> <title>button</title> <style type="text/css"> a.button{ position:relative; width: 80px; height: 50px; background-color: red; display

复选框、单选框与文字对齐问题

前言目前中文网站上面的文字,就我的个人感觉而言,绝大多数网站的主流文字大小为12px,因为在目前高分辨率显示器屏幕下,11px的汉字,其像素点开始不规整,文字不如12px来的显示良好.12px大小的文字就是主流也是底线.然而12px的文字与单选框和复选框是不对齐的.例如下面这张雅虎中国首页在火狐浏览器下的截图: 雅虎中国首页单选框复选框与文字不对齐 这里,不是说,雅虎中国的团队不够认真,而因为这12px大小文字与单选框和复选框对齐的问题不是好解决的.考虑到兼容性,控件本身的特殊性以及代码成本的控

吾八哥学Selenium(三):操作复选框checkbox/单选框radio的方法

复选框checkbox和单选框radio是web网站里经常会使用到的两个控件,那么在web自动化测试的时候如何利用Selenium来操作这俩控件呢?今天我们就来简单入门练习一下! html测试页面代码如下: <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <title>学Python网 - seleni

下拉框和单选框复选框的选中的值

1.下拉框的选中值 <select id="select"> <option value="1">1</option> <option value="2">2</option> </select> 第一种:$("select option:checked").val(); 第二种:$("#select").find("opti