首页 建站教程 WEB前端 正文

JQuery触发单选radio或多选checkbox隐藏显示div

需要达到的功能效果就是当点击radio或checkbox时,显示或隐藏某div,这个功能主要用于表单或后台功能配置项,在优美主题配置中也运用到,这样有利于提升用户体验,选择功能显示对应的功能配置。实现代码如下:1,js代码$(document).ready(function() { //单选触发 &nbs...

需要达到的功能效果就是当点击radio或checkbox时,显示或隐藏某div,这个功能主要用于表单或后台功能配置项,在优美主题配置中也运用到,这样有利于提升用户体验,选择功能显示对应的功能配置。实现代码如下:

1,js代码

$(document).ready(function() {
        //单选触发
        $(".radioItem").change(function() {
            var $selectedvalue = $("input[name='test1']:checked").val();
            if ($selectedvalue == 1) {
                alert('选项一');
            } else {
                alert('选项二');
            }
        });
        //多选触发
        $("input[type='checkbox']").click(function() {
            if ($(this).is(":checked")) {
                alert('已选中')
            } else {
                alert('未选中')
            }
        });
});

2,html代码

<p>
   <input id="radio1" class="radioItem" name="test1" type="radio" value="1" checked="checked"><label for="radio1">选项一</label>
   <input id="radio2" class="radioItem" name="test1" type="radio" value="2"><label for="radio2">选项二</label>
</p>
<p>
   <input id="test2" name="test2" type="checkbox" value=""><label for="test2">多选一</label>
   <input id="test3" name="test3" type="checkbox" value=""><label for="test3">多选二</label>
</p>

演示效果:

此处为隐藏内容,请评论后查看隐藏内容,谢谢!

打赏
海报

本文由优美主题原创或收集发布

转载请注明本文地址:https://www.umtheme.com/web/201.html

相关推荐

CSS选择指定类元素或根据属性选择通配元素

CSS选择指定类元素或根据属性选择通配元素

css是一种用来表现HTML或XML等文件样式的计算机语言,主要是用来根据视觉设计稿定义网页的样式,还原设计稿使网页更加美化。它也是一种定义样式结构如字体、颜色、位置等的语言,并且css样式可以直接存...
WEB前端 2022.07.24 0 136
JQuery实现div模拟select下拉列表

JQuery实现div模拟select下拉列表

对于前端开发者来说,应该都知道默认的select下拉列表比较难看,而且在各个浏览器中select下拉框呈现的默认样式都不一样,尤其是在ie浏览器中,要想把它定义成自己喜欢的样式,简直拿它没什么办法,c...
WEB前端 2022.07.01 0 194

js判断两个input输入框必须任填一个

在表单提交中,有时需要判断两种类型必填其一,如何判断两个input只能填写一个,如果填两个或两个都不填都出现alert验证提示。实现代码如下:<!DOCTYPE html>&...
WEB前端 2021.11.08 0 1002
评论列表
优美粉
看看是啥效果
2022-08-06 15:35:59 回复
佐语先森
学习一下
2022-07-02 19:34:21 回复
umtheme
@佐语先森欢迎常来
2022-07-02 21:29:25 回复

ainiaobaibaibaibaobaobeishangbishibizuichiguachijingchongjingdahaqiandaliandangaodw_dogedw_erhadw_miaodw_tuzidw_xiongmaodw_zhutouganbeigeiliguiguolaiguzhanghahahahashoushihaixiuhanheixianhenghorse2huaixiaohuatonghuaxinhufenjiayoujiyankeaikeliankouzhaokukuloukunkuxiaolandelinileimuliwulxhainiolxhlikelxhqiuguanzhulxhtouxiaolxhwahahalxhzanningwennonuokpinganqianqiaoqinqinquantouruoshayanshengbingshiwangshuaishuijiaosikaostar0star2star3taikaixintanshoutianpingtouxiaotuwabiweifengweiquweiwuweixiaowenhaowoshouwuxiangjixianhuaxiaoerbuyuxiaokuxiaoxinxinxinxinsuixixixuyeyinxianyinyueyouhenghengyuebingyueliangyunzanzhajizhongguozanzhoumazhuakuangzuohenghengzuoyi
感谢您的支持