精华内容
下载资源
问答
  • 2018-05-03 16:23:11

        react和vue已经是当下前端开发领域的主流框架。确实极大程度的提高了开发效率。在博文 vue.js实现单选框、复选框和下拉框中详细叙述了vue实现表单的基本原理。本文将利用react实现相同功能。

    一、react开发模板

        使用react进行网页开发,其基本结构如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="../source/react.js"></script>
        <script src="../source/react-dom.js"></script>
        <script src="../source/browser.min.js"></script>
    </head>
    <body>
    <div id="root"></div>
    <script type="text/babel">
     //todos
    </script>
    </body>
    </html>

    在head部分,引入了三个非常重要的js文件。其作用分别为:

    • react.js:React的核心库
    • react-dom.js:提供与DOM相关的功能
    • browser.js:实现JSX语法向JavaScript语法的转换

     另一个值得注意的地方在于body标签内,script标签的type属性设置为:text/babel。这是因为react的JSX语法与JavaScript语法不兼容,凡是用到JSX语法的地方都需要设置type属性。

    二、react实现单选框

        在HTML当中,一些表单元素会根据用户的输入更新某些属性值。而在react中,这些可变的状态通常保持在组件的状态属性中,并且只能用setState( )方法更新。

        利用react实现单选框,其body部分的代码如下:

    <div id="root"></div>
    <script type="text/babel">
        class FlavorForm extends React.Component {
            constructor(props) {
                super(props);
                this.state = {value: ''};
                this.handleChange = this.handleChange.bind(this);
            }
    
            handleChange(event) {
                this.setState({value: event.target.value});
            }
    
            render() {
                return (
                        <div>
                            <label > <input type="radio" name='gender' value="Man"
                                            onChange={this.handleChange}/>Man</label><br/>
                            <label > <input type="radio" name='gender' value="Women"
                                            onChange={this.handleChange}/>Women</label>
                            <div>gender: {this.state.value}</div>
                        </div>
                )
            }
        }
        ReactDOM.render(
                <FlavorForm/>,
            document.getElementById('root')
        )
    </script>

    由以上代码可以看到,监听每个input标签的onChange事件,并在相应函数里更新组件状态。

    三、多选框

        多选框的实现方式和单选框类似,也可以通过监听各input标签的onChange事件来实现。其body部分的标签如下所示。

    <div id="root"></div>
    <script type="text/babel">
        class CheckBox extends React.Component {
            constructor(props) {
                super(props);
                this.state = {value: []};
                this.handleChange = this.handleChange.bind(this);
            }
            handleChange(event) {
                let item = event.target.value;
                let items = this.state.value.slice();
                let index = items.indexOf(item);
                index === -1 ? items.push(item) : items.splice(index, 1);
                this.setState({value: items});
            }
            render() {
                return (
                        <div>
                            choose fruit:<br/>
                            <label><input type="checkbox" name="fruit" value="apple"
                                          onChange={this.handleChange}/>apple</label><br/>
                            <label><input type="checkbox" name="fruit" value="banana"
                                          onChange={this.handleChange}/>banana</label><br/>
                            <label><input type="checkbox" name="fruit" value="pear"
                                          onChange={this.handleChange}/>pear</label><br/>
                            <div>Chosen : {this.state.value.join('-')}</div>
                        </div>
                )
            }
        }
        ReactDOM.render(
                <CheckBox/>,
            document.getElementById('root')
        )
    </script>

    从代码中可以看到,我们定义了一个组件状态value,其值是一个数组,存放着选中信息。需要注意的是,在handleChange函数中,更新value时,必须使用setState函数,否则代码不会被重新渲染,在return中显示已选中的选项不会实时更新。

    四、下拉框

    下拉框的实现方式和单选框、复选框类似,这里直接以一个例子说明,其body部分的代码如下:

    <div id="root"></div>
    <script type="text/babel">
        class FlavorForm extends React.Component {
            constructor(props) {
                super(props);
                this.state = {value: 'basketball'};
                this.handleChange = this.handleChange.bind(this);
            }
            handleChange(event) {
                this.setState({value: event.target.value});
            }
            render() {
                return (
                        <div>
                            <label>choose favorite sports:
                                <select value={this.state.value} onChange={this.handleChange}>
                                    <option value="running">running</option>
                                    <option value="basketball">basketball</option>
                                    <option value="skiing">skiing</option>
                                </select>
                            </label>
                            <div>chosen: {this.state.value}</div>
                        </div>
                )
            }
        }
        ReactDOM.render(
                <FlavorForm/>,
            document.getElementById('root')
        )
    </script>

    以上代码中,组件状态value给了一个默认值,并在return中的select标签中使用,这些实现的是一个默认选中的功能。

    总之,利用react实现表单的原理都是相同的,利用一个组件状态来存储选中信息,然后监听各input标签的onChange事件。并在响应函数中更新组件状态。


    更多相关内容
  • 单选框效果: 单选框的样式是不可改变的,实际上的改变样式只是寻找别的东西来替换单选框。 css代码 input{ display: none; } span::before{ display: block; width: 20px; height: 20px; ...

    单选框效果:

    在这里插入图片描述

    单选框的样式是不可改变的,实际上的改变样式只是寻找别的东西来替换单选框。

    css代码

     input{
                display: none;
            }
            span::before{
                display: block;
                width: 20px;
                height: 20px;
                content: " ";
                border: 1px solid black;
                box-sizing: border-box;
                border-radius: 50%;
                position: absolute;        }
            span::after{
                display: block;
                width: 20px;
                height: 20px;
                content: " ";
                background: red;
                float: left;
                border-radius: 50%;
                transform: scale(0);
                transition: all 2s;
            }
            label{
                display: block;
            }
            #abc:checked~span::after{
                transform: scale(0.8);
            }
            #efg:checked~span::after{
                transform: scale(0.8);
            }
    

    html代码:

        <label for="abc">    <input type="radio" name="radios" id="abc"><span>我最帅</span>
        </label>
        <label for="efg">    <input type="radio" name="radios" id="efg"><span>你不帅</span>
        </label>
    

    注:1. 两个单选框name设为相同,代表这两个单选框为一个组别,即只能选中一个
    2.~ 为选择器,代表选择某元素下的所有要选择的元素
    3. label的for属性:与input的id搭配使用,代表label的存在是为了相应id的input元素 即控制label可以达到input可以产生的效果


    说明:

    1. 本例中使用 after 和 before 伪元素来替代单选框
    2. 分别将 after 和 before 设置为块元素并且设置对应的大小颜色和属性
    3. 为after设置浮动向左,after即可浮动到span前面,before的后面
    4. 再为before设置绝对定位 position:absolute; before与after即可重叠
    5. 本例中为after 和before设置圆边框,使两者成为圆形样式
      注:(after与before应设置相同大小,再通过scale来改变相应大小,这样即使页面缩放两者也不会错位)
    6. 最后通过相应的input id来选择对应的span
      #abc:checked~span::after{transform: scale(0.8);}
    7. 本例中before为替代单选框的边框 ,after为替代单选框中的圆形填充,且设置效果为after更改大小

    复选框效果

    在这里插入图片描述

    css代码

            input{
                display: none;
            }
            span::before{
                display: block;
                width: 40px;
                height: 20px;
                content: " ";
                border: 3px solid black;
                box-sizing: border-box;
                position: absolute;        }
            span::after{
                display: block;
                width: 40px;
                height: 20px;
                content: " ";
                border: 3px solid red;
                border-top: none;
                border-right: none;
                float: left;
                transform: scale(0) ;
                transition: all 2s;
                
            }
            label{
                display: block;
            }
            #abc:checked~span::after{
                transform: scale(0.4) rotate(-45deg);
            }
    

    html代码

     <label for="abc">    <input type="checkbox" name="radios" id="abc"><span>我最帅</span>
        </label>
    

    实现原理与单选框基本相同,里面的对号是after的左边框和下边框

    总结:通过label的for属性和 伪元素before after可以改变单选框和复选框样式,效果不只是上述的效果,例如可以设置样式为图片等。

    展开全文
  • java:按钮(复选框

    千次阅读 2022-04-04 18:46:38
    复选框“◻”,即方框可可勾选的按钮,和单选框“O”(圆形可勾选按钮)不同的只是外形代码的单词不同,原理流程却相似。如都要引入相关的包类,以创建组件等。若复选框和单选框一样使用按钮组,也可以达成单选...

    一、关键代码

    (一)、单选按钮组件

    • 复选框“”,即方框可可勾选的按钮,和单选框“O”(圆形可勾选按钮)不同的只是外形和代码的单词不同,原理流程却相似。如都要引入相关的包类,以创建组件等。若复选框也和单选框一样使用按钮组,也可以达成单选框的效果。当然反过来,圆形可勾选按钮(单选框)也可以作为复选框的功能来使用。圆形可勾选按钮(单选框)具体可以看往篇“按钮(圆形可勾选按钮)”的博文。
    • 添加如下代码时,相关联的几个按钮中只能勾选一个按钮。比如,勾选按钮c_box_1后再勾选按钮c_box_2后,则按钮c_box_1的勾选效果便会取消,最后也只有按钮c_box_2则处于勾选状态。这里根据代码 JCheckBox 字面没有关于按钮的内容,但细看字面可翻译为:java的可勾选盒子,也就是复选框。流程原理和单选框相同,创建的组件(按钮,等)都要放入到group(组)中,以达到几个按钮只能勾选一个的效果。
    		// 单选按钮组件
    		ButtonGroup group_1=new ButtonGroup();// 按钮 组
    		group_1.add(c_box_1);
    		group_1.add(c_box_2);
    		group_1.add(c_box_3);
    
    • 注意:使用相应的代码功能需要添加相应的功能包。以上的代码则需要在源码前添加如下代码类包:
    		import javax.swing.JCheckBox;// 复选框
    

    (二)、按钮默认勾选

    • 这里代码是默认勾选按钮c_box_1。
    • 默认情况下,按钮初始状态是没有勾选的。想默认勾选哪个按钮,需要如下代码:
    		c_box_1.setSelected(true);// 默认选中,Selected(选中)。
    

    二、简单说明

    大致流程思想:

    1. 创建一个窗体,创建一个容器,将容器嵌入窗体中。
    2. 容器设置布局(本文:流布局)。
    3. 在容器中新建圆形可勾选的按钮组件,多个。
    4. 添加单选按钮组件。
    5. 设置默认勾选按钮。
    6. 新建监听器,创建事件,编辑事件的内容,本文用的是信息框。
    • 此外,注意添加窗体和容器的相关功能的包类,import ····等这些。或则使用继承JFrame窗体类的方法也可以,作者为让逻辑感更好一个类一个类的设置引用。望往后能熟能生巧。

    三、流程图

    也可以叫做
    窗体
    容器
    复选框
    布局
    方框可勾选按钮
    单选按钮组
    按钮默认勾选
    监听器
    事件
    信息框

    四、源码

    (一)、源码A

    /*	【程序思想】
    *	按钮 复选框
    
    	1、窗体
    	2、按钮,方框可打勾按钮
    	3、按钮,复选框
    */
    
    import java.awt.Container;// 容器
    import java.awt.FlowLayout;// 流布局
    
    import java.awt.event.ActionListener;// 监听器
    import java.awt.event.ActionEvent;// 事件
    
    import javax.swing.JFrame;// 窗体
    import javax.swing.JCheckBox;// 复选框
    import javax.swing.JOptionPane;// 消息框
    import javax.swing.JButton;// 按钮
    import javax.swing.ButtonGroup;// 按钮组
    
    class Demo{
    	JFrame f=new JFrame();// 创建窗体
    	Container c;// 容器
    
    	/*
    		way2
    		设置容器
    		复选框
    	*/
    	void way2(){
    		// Content(包含),pane(窗格)
    		c=f.getContentPane();// 容器c嵌入窗体f中
    		c.setLayout(new FlowLayout());// 布局,流布局,flow(流动)
    
    		JCheckBox c_box_1=new JCheckBox("按钮1");// 复选框,check(打勾)
    		JCheckBox c_box_2=new JCheckBox("按钮2");// check(打勾)
    		JCheckBox c_box_3=new JCheckBox("按钮3");// check(打勾)
    
    		c.add(c_box_1);
    		c.add(c_box_2);
    		c.add(c_box_3);
    
    		// 单选按钮组件
    /*		ButtonGroup group_1=new ButtonGroup();// 按钮 组
    		group_1.add(c_box_1);
    		group_1.add(c_box_2);
    		group_1.add(c_box_3);
    */
    		c_box_1.setSelected(true);// 默认选中,Selected(选中)。
    	
    		JButton btn_0=new JButton("点击触发事件");
    		// action(动作),listener(监听)
    		btn_0.addActionListener(new ActionListener(){// 增加监听动作
    			// performed(执行)
    			public void actionPerformed(ActionEvent e){// 满足 动作 事件 的选择后触发以下事件
    				// 信息框,option(选择),message(消息),dialog(对话框)
    				JOptionPane.showMessageDialog(f,
    					c_box_1.getText()+"是否选中:"+c_box_1.isSelected()+"\n"+
    					c_box_2.getText()+"是否选中:"+c_box_2.isSelected()+"\n"+
    					c_box_3.getText()+"是否选中:"+c_box_3.isSelected()
    				);
    			}
    		});
    		c.add(btn_0);
    	}
    	/*
    		way1
    		窗体的基本属性
    	*/
    	void way1(){
    		f.setBounds(400,200,500,400);// 坐标、尺寸
    		// Default(默认),Operation(操作)
    		f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);// 点×即关闭
    
    	}
    
    	public static void main(String[] args) {
    		Demo d=new Demo();
    		d.way1();// 窗体基本属性
    		d.way2();// 容器。复选框。
    
    		d.f.setVisible(true);// 窗体可见
    	}
    }
    
    
    

    (二)、源码A的运行效果

    • 1.默认效果如下图:
      在这里插入图片描述

    • 2.再点击按钮2,点击“点击触发事件”,弹出信息框。如下图:
      注意:单选框的功能已经被注释,程序运行不会有单选的效果,想实现单选框的效果取消单选组件的相关代码的注释便可。
      在这里插入图片描述

    五、结语

    复选框的原理和单选框的原理相似,单选框按钮的内容,具体可浏览上一篇博文《按钮(圆形可勾选按钮)》。虽说是单选框和复选框,但其实这两也只是代码中单词翻译的字面意识不同。真正实现单选的功能,只是添加了一个按钮组ButtonGroup类的功能。不加这个单选功能时,方框或者圆形的可勾选按钮组(单选框和复选框)都可以是复选,也就是多个按钮可同时勾选;而添加了单选的功能,方框或者圆形的可勾选按钮组(单选框和复选框)都只能是单个按钮勾选了。

    六、定位日期

    2022.4.4;19:42

    展开全文
  • 用户在输入的信息称之为内容,内容的文本分为普通密码型,用户通过单选框复选框、下拉框(也就是下拉菜单)完成内容信息输入,最后通过提交按钮发送给服务器! 这里要讲到浏览器怎么发送给服务器?涉及到http...

    表单是什么?表单是前端和服务器做交互的一种机制,表单收集用户输入信息,之后发送或者提交给服务器。用户在输入的信息称之为内容,内容的文本分为普通和密码型,用户通过单选框、复选框、下拉框(也就是下拉菜单)完成内容信息输入,最后通过提交按钮发送给服务器!

    这里要讲到浏览器怎么发送给服务器?涉及到http协议,也就是超文本传输协议,它是浏览器和服务器通讯的一种机制。模式为:请求——应答,浏览器发送请求=>服务器接收=>自身处理=>结果返回浏览器=>浏览器根据结果展示页面给用户,请求分为GET和POST。下面用代码依次展示说明:

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     6     <title>html基本标签表单实现交互原理,单选框,复选框,下拉框介绍</title>
     7 </head>
     8 <body>
     9     <form action="" method="POST">
    10         <!-- <input type="text"> --><!--如果没有name值,提交不成功,导航网址会显示file:///C:/Users/Administrator/Desktop/%E8%9D%89%E5%A3%B30%E5%9F%BA%E7%A1%80%E5%89%8D%E7%AB%AF%E8%AF%BE%E7%A8%8B/1-1.html?-->
    11         用户:<input type="text" name="ueser"><!--文本输入类型text-->
    12         <!--添加name值,提交后,导航网址会显示file:///C:/Users/Administrator/Desktop/%E8%9D%89%E5%A3%B30%E5%9F%BA%E7%A1%80%E5%89%8D%E7%AB%AF%E8%AF%BE%E7%A8%8B/1-1.html?ueser=111-->
    13         <br>
    14         密码:<input type="password" name="password"><!--密码是password--><!--如果输入用户是11,密码是abc展示为这样file:///C:/Users/Administrator/Desktop/%E8%9D%89%E5%A3%B30%E5%9F%BA%E7%A1%80%E5%89%8D%E7%AB%AF%E8%AF%BE%E7%A8%8B/1-1.html?ueser=11&password=abc-->
    15         <p>这里涉及到加密问题,浏览器传输服务器加密的密文用JS操作处理,后面学习中会聊到的</p>
    16         <br>
    17         性别:<input type="radio" name="sex" value="boy">男<input type="radio" name="sex" value="womnen">女<input type="radio" name="sex" value="weizhi">中性 18         <!--radio是单选框,这里的name值都是一样的,如果是不一样的,选择就是多个了-->
    19         <!-- 性别: <input type="radio" name="sex1">男<input type="radio" name="sex">女<input type="radio" name="sex">中性 -->
    20         <br>
    21         <!-- <input type="checkbox">是这个复选框,可以选择多个 -->
    22         爱好:<input type="checkbox" name="like" value="meinv">美女<input type="checkbox" name="like" value="car">汽车<input type="checkbox" name="like" value="power">权利 23         <br>
    24         <!-- 下拉框select 里面有选项是option -->
    25 城市: 26         <select name="city">
    27             <option name="beijing" value="bj">北京</option>
    28             <option name="shanghai" value="sh">上海</option>
    29             <option name="guangzhou" value="gz">广州</option>
    30             <option name="shenzhen" value="sz">深圳</option>
    31         </select>  
    32         <br>
    33         <input type="submit"><!--文本提交按钮submit-->
    34         <!--如果这样就点击提交,导航栏会出现file:///C:/Users/Administrator/Desktop/%E8%9D%89%E5%A3%B30%E5%9F%BA%E7%A1%80%E5%89%8D%E7%AB%AF%E8%AF%BE%E7%A8%8B/1-1.html?ueser=1&password=1&sex=on&like=on&city=%E5%8C%97%E4%BA%AC-->
    35     </form>
    36 </body>
    37 </html>
    
    专门建立的学习Q-q-u-n: 784783012 ,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习技巧
    (从零基础开始到前端项目实战教程,学习工具,全栈开发学习路线以及规划)
    

    然后你会惊讶的发现你的爱好和性别展示都是on,没出来,这是什么原因了?因为前端浏览器给用户看,会涉及到一个默认值,用value表示,就是说只要和选择相关就需要有默认值提交给服务器,这样我们添加下value值,之前是没有的,现在在重新输入下:
    浏览器的窗口网址就会展示如下:

    file:///C:/Users/Administrator/Desktop/%E8%9D%89%E5%A3%B30%E5%9F%BA%E7%A1%80%E5%89%8D%E7%AB%AF%E8%AF%BE%E7%A8%8B/1-1.html?ueser=1&password=abc&sex=boy&like=meinv&city=bj

    当然这样你提交的内容,服务器还是没办法接收到,那怎么办了?在中action="“是一个提交动作,填写你提交的地址,比方说http://www.dhnblog.com/,注意了这里需要用到method=”",我们的请求分为GET和POST,只需要修改form表单开始标签

    GET请求POST请求,它们的区别是GET请求内容展示在导航栏网址中,POST请求在控制台里面,如下图所示:

    展开全文
  • 二、单选框:radio三、复选框:checkbox四、判断是否勾选:is_selected()1.有时候这个选项框,本身就是选中状态,如果我再点击一下,它就反选了,这可不是我期望的结果,那么可不可以当它是没选中的时候,我去点击下...
  • 麻烦是说由于设计器的使用不方便(如果您希望使用窗体设计器通过快速拖拽控件建立您的Java Swing GUI程序,请您使用MyEclipse 8.5以上版本,并且需要最高使用权限),所有代码都得手写,如果没有好的编码规范注释...
  • 【多题】筛选科学知识的标准包括( )。【多题】园林植物在其生命全过程中,始终存在着( )之间等矛盾。【单选题】绝对购买力平价可用()来表示。【单选题】无应激试验的目的是【单选题】—Sorry I’m late. I got ...
  • -- 3.i 元素结合伪类(:before或:after)模拟单选框 radio 选框 checkbox 的外观。 --> 具体操作 一、美化单选按钮(radio) 1.具体代码如下所示: <!DOCTYPE html> < html lang = "en" > < ...
  • 麻烦是说由于设计器的使用不方便(如果您希望使用窗体设计器通过快速拖拽控件建立您的Java Swing GUI程序,请您使用MyEclipse 8.5以上版本,并且需要最高使用权限),所有代码都得手写,如果没有好的编码规范注释...
  • 控制器是直接与视图通信的,因此,所有的请求响应都是由控制器来接待处理。对于.NET MVC 5中要实现的修改数据的功能,跟添加功能一样,都需要两个操作方法,一个是GET请求的显示修改页面,能够让用户访问到要...
  • 我以为他们可以,但是因为我不把钱放在我的嘴里(可以这么说)设置readonly属性实际上似乎没有做任何事情。 我宁愿不使用Disabled,因为我希望检查复选框与表单的其余部分一起提交,我只
  • 关键技术点和原理原理就是把 checkbox或 radio 给隐藏掉 ,然后给选框 绑定一个label标签。 然后用label标签作为容器,在里面放一个:before或一个after 用before模拟选框的,用after来模拟选框的填充 通过...
  • 最近一直在关注工具,从Reactnpm-install-everything中休息一下,看看一些原生的 DOM Web API 的功能,他们可以在没有任何依赖库的浏览器中直接运行。这篇文章将介绍八个鲜为人知的 DOM 功能,浏览器已经支持了...
  • AxureRP教程

    2020-12-19 07:12:48
    AxureRP提供了一系列常用的组件,其中也包括了单选框和复选框,应该来说这两个组件是经常会用到的,涉及选择项的时候,就会想是要做单选控制还是多选控制。常见的用法不做过多解释,这里介绍一下AxureRP里是如何来...
  • 20、angular1全局方法、五种服务、重要指令(ng-) 、过滤、父子传值emit、directive,下拉框,单选框|复选框|下拉框、下拉表格、获取不到新value、3个each用法示例、ui.router、ngRoute、jqLite的API参考、前端路由...
  • vue 基本知识点,如下所示: 插值、表达式,指令、动态属性,v-html 会有 XSS 风险,会覆盖子组件,代码如下所示: <template> <div> <p>文本插值 {{message}}</p> <p>JS ...
  • mvc mvvm 其实区别并不大。都是一种设计思想。 主要就是 mvc 中 Controller 演变成 mvvm 中的 viewModel。 mvvm 主要解决了 mvc 中大量的 DOM 操作使页面渲染性能降低,加载速度变慢,影响用户体验。当 Model ...
  • 7、java swing 添加 jcheckbox复选框

    千次阅读 2013-12-30 17:26:47
    麻烦是说由于设计器的使用不方便(如果您希望使用窗体设计器通过快速拖拽控件建立您的Java Swing GUI程序,请您使用MyEclipse 8.5以上版本,并且需要最高使用权限),所有代码都得手写,如果没有好的编码规范注释...
  • 上节课的知识复习互联网的原理:服务器、浏览器、HTTP。知道网页文件是真实的物理存在,用HTTP请求这个文件。要知道网址的含义:http://www.iqianduan.cn/aaa请求哪个文件?请求的是iqianduan.cn服务器上的aaa文件夹...
  • vue实现单选多选反选全选全不 单选 当我们用v-for渲染一组数据的时候,我们可以带上index以便区分他们我们这里利用这个index来简单地实现单选 &amp;lt;li v-for="(item,index) in ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 6,073
精华内容 2,429
关键字:

复选框和单选框基本原理