checkbox选中事件

firefox中 checkbox属性checked=\"checked\"已有,但复选框却不显示打钩的原因

陌路散爱 提交于 2020-03-30 21:46:53
最近在调试复选框的应用,在ie没有问题,考虑到兼容性,试试了firefox,遇到了问题。 复选框绑定了click事件,点一次选中,再点击取消选中,依次类推。这个功能在ie中没问题,但是在firefox中测试的时候,前两次都没有问题,可以正常显示选中和取消,但当再去选中的时候,复选框的属性checkbox值变为"checked",没问题,但是复选框却不在显示选中状态,明明属性值改了,但是却不显示勾选,太诡异了。代码修改了却得不到正确的显示状态,纠结了很久,找不到原因。 正解:后来经偶像指点,原来是jQuery版本问题。我操作属性用的是 $("**").attr("attrName");而jQuery的版本用的是1.9,这就是存在一个兼容性和稳定性问题。 jQuery API明确说明,1.6+的jQuery要用prop,尤其是checkBox的checked的属性的判断,即 //禁止勾选 $("input[type='checkbox']").prop("disabled", false); //选中 $("input[type='checkbox']").prop("checked", true); //取消 $("input[type='checkbox']").prop("checked", false); 在使用是将attr改为prop,问题得解。 来源: https:/

5.2 Android Basic QuickStart Widgets&Other View Form Stuff

爷,独闯天下 提交于 2020-03-22 15:06:00
Form Stuff 本演练演示使用多样的控件创建表单,如Image button, text files, checkboxes and radio buttons. 新建项目 HelloFormStuff 打开res/layout/main.xml文件,修改代码如下: <? xml version = "1.0" encoding = "utf-8" ?> < LinearLayout xmlns:android = "http://schemas.android.com/apk/res/android" android:orientation = "vertical" android:layout_width = "fill_parent" android:layout_height = "fill_parent" > </ LinearLayout > 3. 现在创建 Custom Button Edit Text CheckBox RadioButtons Toggle Button Rating Bar Cusstom Button 复制图片到 res/drawable 目录,这些图片将显示按钮的不同状态。 2. 在res/drawable/目录新建 android_button.xml 插入下面的代码到XML: <? xml version = "1.0"

jQuery

ⅰ亾dé卋堺 提交于 2020-03-16 03:54:10
表单筛选器 :text :password :file :radio :checkbox :submit :reset :button 例子: $(":checkbox") // 找到所有的checkbox 表单对象属性: :enabled :disabled :checked :selected 例子: 找到可用的input标签 <form> <input name="email" disabled="disabled" /> <input name="id" /> </form> $("input:enabled") // 找到可用的input标签 找到被选中的option: <select id="s1"> <option value="beijing">北京市</option> <option value="shanghai">上海市</option> <option selected value="guangzhou">广州市</option> <option value="shenzhen">深圳市</option> </select> $(":selected") // 找到所有被选中的option 链式操作:每一步的jQuery操作,返回的都是一个jQuery对象,所以不同操作可以连在一起。 筛选器方法 下一个元素: $("#id").next() 

第九章:小程序表单与医疗急救卡(上)

筅森魡賤 提交于 2020-02-28 00:45:52
作者: 知晓云 - 小程序开发快人一步 来源:知晓课堂 医疗急救卡小程序是什么? 该小程序主要为一个表单的填写与提交。示例表单的内容包括姓名、性别、血型、医疗情况、服药情况、是否为器官捐献者和紧急联系人电话号码。提交成功后表单显示用户已填写的信息,如果用户想更新,直接更改表单内容再次提交即可。 我们所用到的组件和 API 所需组件 表单:form,将组件内用户输入的 <input/> <switch/> <radio> 等提交; 按钮:button,用以提交表单等; 输入框:input,用户输入姓名和紧急联系人电话号码; 单项选择器:radio-group 和 radio, 用户选择性别; 从底部弹起的滚动选择器:picker, 用户选择血型; 多项选择器:checkbox-group 和 checkbox,用户选择医疗情况; 多行输入框:textarea,用户输入自身服药情况; 开关选择器:switch,用户选择是否为器官捐献者。 所需 API wx.showToast: 显示消息提示框,当用户提交表单后,给予成功或失败提示; wx.makePhoneCall: 拨打紧急联系人电话。 上手开发 卡片展示页面 首次使用小程序,页面将显示一个 「创建医疗急救卡」 的按钮,效果图如下: 点击该按钮后显示表单,效果图如下: 当用户提交过表单后,按钮 “提交” 变为 “更新”

微信小程序——js事件

♀尐吖头ヾ 提交于 2020-02-04 12:05:22
一、点击事件 bindtap < view class = " bottom " > < button bindtap = " addCart " > 加入购物车 </ button > <!-- 事件传参,参数名buy,值'true' --> < button bindtap = " addCart " data-buy = " true " > 立即购买 </ button > </ view > 获取传参:e.currentTarget.dataset 读取本地存储:wx.getStorageSync(“cartList”) 设置本地存储:wx.setStorageSync(“cartList”, productList); 跳转tab:wx.switchTab 弹出模态框:wx.showModal addCart : function ( e ) { // 获取参数名为buy的参数,判断是否跳转购物车 var isGoCart = e . currentTarget . dataset . buy ; // 获取、存入localstorage var productList = wx . getStorageSync ( "cartList" ) ; if ( ! productList ) { productList = [ ] ; } productList .

微信小程序-checkbox复选框

谁都会走 提交于 2020-01-31 22:15:57
微信小程序-checkbox复选框 demo.wxml <!-- checkbox 复选框 1 checkbox标签 必须要和 父元素 radio-group 来使用 2 value 选中的单选框的值 3 需要给 radio-group 绑定 change 事件 4 需要在页面中显示 选中的值 --> < view > < checkbox-group bindchange = " HandelItemChange " > < checkbox value = " {{item.value}} " wx: for = " {{list}} " wx: key = " id " > {{item.name}} </ checkbox > </ checkbox-group > < view > 选中的水果:{{checkedList}} </ view > </ view > demo.js // pages/demo15/demo15.js Page ( { /** * 页面的初始数据 */ data : { list : [ { id : 0 , name : "苹果" , value : "apple" } , { id : 1 , name : "葡萄" , value : "grape" } , { id : 2 , name : "香蕉" , value :

自定义CheckBox样式

北战南征 提交于 2020-01-25 09:32:03
1.自定义效果图 2.准备图片选中和未选中的图片 2.1 图片和文件名 btn_check_off.png btn_check_on.png 2.2 项目结构 3.编写样式文件 3.1 项目文件结构   3.2 checkbox_style.xml 代码 < selector xmlns:android = "http://schemas.android.com/apk/res/android" > < item android:drawable = "@drawable/btn_check_on" android:state_checked = "true" /> < item android:drawable = "@drawable/btn_check_off" android:state_checked = "false" /> </ selector > 4. 编写页面文件 main.xml < CheckBox android:id = "@+id/checkBox1" android:layout_width = "wrap_content" android:layout_height = "wrap_content" android:button = "@drawable/checkbox_style" android:text = "CheckBox" /> 5

自定义表单样式之checkbox和radio

本秂侑毒 提交于 2020-01-23 02:26:25
1,起因 最近在工作中要实现自定义式的radio样式,而我们通常使用的时默认的样式,因为自己实在想不到解决的方法,于是开始搜索,最终看到了不错的解决办法,可以完美解决我们遇到的问题。 2,原理 大家都知道在写结构的时候,radio或checkbox都会跟随label一起使用,label的for属性值和input的id值相同的情况下,点击label就可以选中input,这里正是利用label 来覆盖我们的input默认样式,通过给label添加背景图片(美化的checkbox或radio),也就是在点击的过程中,我们是看不到默认的input的(给input设置z-index:-1),而点击的是label,通过不同的事件,加载不同的背景图片(这里是改变背景图片的位置) 3,设置美化checkbox或radio的默认样式 (1)页面结构 <form class="form" method="post"> <fieldset> <legend>Which genres do you like?</legend> <input type="checkbox" value="action" id="check-1" name="genre"><label for="check-1" class="">Action / Adventure</label> <input type=

获取jQuery中的复选框值

匆匆过客 提交于 2020-01-22 01:15:44
如何在 jQuery 中获取复选框的值? #1楼 尝试这个小解决方案: $("#some_id").attr("checked") ? 1 : 0; 要么 $("#some_id").attr("checked") || 0; #2楼 $('# checkbox _id').val(); $('#checkbox_id').is(":checked"); $('#checkbox_id:checked').val(); #3楼 这两种方式正在发挥作用: $('#checkbox').prop('checked') $('#checkbox').is(':checked') (谢谢 @mgsloan ) $('#test').click(function() { alert("Checkbox state (method 1) = " + $('#test').prop('checked')); alert("Checkbox state (method 2) = " + $('#test').is(':checked')); }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> Check me: <input id="test" type=

纯js全选、多选

≯℡__Kan透↙ 提交于 2020-01-09 22:31:09
使用纯js来写一个模拟购物车的全选和多选功能。 思路:   1、需要给每一个input设置点击事件   2、全选就是把所有的checkbox设置为true   3、取消一个不全选,就是判断是否全部的checkbox都被选了 代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <input type="checkbox" id="all"/>全选 <div id="checkbox"> <input type="checkbox"/>选择一 <br/> <input type="checkbox"/>选择二 </div> <script> //获取全选按钮 var all = document.getElementById("all"); //获取div中所有的复选框 var checkboxs = document.getElementById("checkbox").getElementsByTagName("input"); //点击全选,获取他当前的状态并设置新的状态 all.onclick = function(){ for(var i = 0;i < checkboxs.length; i++){ checkboxs[i]