Rails多个复选框--check_box_tag

view

<% @roles.each do |role| %>
  <%= check_box_tag ‘roles[]‘, role.id%>
  <%= label_tag role.name %>
<% end %>  

生成HTML页面效果

<input type="checkbox" value="1" name="roles[]" id="roles_">
<label for="SuperAdmin">Superadmin</label>  

<input type="checkbox" value="2" name="roles[]" id="roles_">
<label for="Teacher">Teacher</label>  

<input type="checkbox" value="3" name="roles[]" id="roles_">
<label for="Student">Student</label>  

controller获得信息

"roles"=>["2", "3"]  #params[:roles]

Rails多个复选框--check_box_tag

时间: 2024-10-12 12:27:48

Rails多个复选框--check_box_tag的相关文章

jQuery学习(五)——使用JQ完成复选框的全选和全不选

1.在系统后台进行人员管理时,进行批量删除,使用jq完成全选和全不选 步骤分析: 第一步:引入jquery文件 第二步:书写页面加载函数 第三步:为上面的复选框绑定单击事件 第四步:将下面所有的复选框的选中状态设置成跟上面的一致! 2.具体代码实现: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>使用jQuery完成复选框的全选和全不

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

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

HTML页面中A博娱乐复选框的操作方法

A博娱乐复选框在网页中很是常见,无论是电商网站,还是平台,只有有需要选择的地方就会见到复选的身影.接下来,是我之前写过的两个小demo,都是关于复选框的,希望会给大家带来帮助. 第一个是关于复选框全选反选的操作,当然我在里面还加了一个小功能,就是当选择底下尚品或者其他的东西的复选框全部为选中状态时则全选按钮也变为选中状态:反之亦然. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 3

CSS 美化复选框 - 无图片方式

今天和大家分享一个不使用图片美化复选框的方式.来看下效果图吧,如下是3种不同状态下的效果: 一. Html结构 <div class="check-wrap"> <input type="checkbox" class="icheck" id="icheck" /> <label for="icheck" class="ilabel"></lab

Spring MVC-表单(Form)标签-复选框(Checkbox)示例(转载实践)

以下内容翻译自:https://www.tutorialspoint.com/springmvc/springmvc_checkbox.htm 说明:示例基于Spring MVC 4.1.6. 以下示例显示如何使用Spring Web MVC框架在窗体中使用单个复选框.首先,让我们使用Eclipse IDE,并按照以下步骤使用Spring Web Framework开发基于动态窗体的Web应用程序: 步骤 描述 1 创建一个名为HelloWeb的项目,在一个包com.tutorialspoint

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

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

jquery实现复选框全选,全不选,反选中的问题

今天试了一下用jquery选择复选框,本来以为很简单的东西却有bug,于是搜索了一下找到了解决方法. html代码如下(这里没有用任何样式,就没有再放css了): <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="test_ch5.css" > <title>test_ch5</title> &

jquery中input复选框的checked属性

在今日的多选,反选,全选试验中,关于通过jQuery方法来实现复选框的选中与否问题,我有了以下发现: 1.不能通过.css('checked','checked')方法来设置或者获取复选框的checked属性,在控制台打印输出.css('checked'),结果为undefined, 不管在HTML中是否设置了checked='checked'; 2.通过attr添加属性即.attr('checked','abc'),会给HTML中input所在处添加checked='checked'这样的代码

纯css3实现美化复选框和手风琴效果(详细)

关键技术点和原理: 原理就是把 checkbox或 radio 给隐藏掉   ,然后给选框 绑定一个label标签. 然后用label标签作为容器,在里面放一个:before或一个after 用before模拟选框的框,用after来模拟选框的填充 通过 .magic-checkbox:checked + label:after {/*选框被选中时 显示after填充*/ display: block; } 来确定是否选中复选框,如果checked就把after的显示. 先贴出html的代码 <