分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > IT知识

jQuery判断是否选中

发布时间:2023-09-06 01:50责任编辑:彭小芳关键词:jQuery

1.判断check是否选中

<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>判断check是否被选中</title> ???<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" /> ???<meta content="yes" name="apple-mobile-web-app-capable" /> ???<meta content="black" name="apple-mobile-web-app-status-bar-style" /> ???<meta content="telephone=no" name="format-detection" /> ???<style type="text/css"> ???????*{margin:0; padding: 0} ???????body{font:14px/1.4 "Microsoft Yahei",Arial,Helvetica,sans-serif;background-color: #fff;color:#333;max-width: 640px;margin: 0 auto;} ???????a{ text-decoration: none; color: #333 } ???????/*btn*/ ???????.public_btn_s {padding: 10px 0; margin: 0 10px;} ???????.public_btn_s a { display: block; height: 34px; line-height: 34px; text-align: center; font-size: 18px; background-color: #31b6e7; color: #fff; border-radius: 5px; -o-border-radius: 5px; -ms-border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; } ???</style></head><body> ???<div class="public_agreement"> ???????<input type="checkbox" id="agreeInput" value="on">同意<a href="javascript:;" >个人隐私协议</a> ???</div> ???<div class="public_btn_s"> ???????<a href="javascript:;" class="J_ajax_submit_btn">点击查看</a> ???</div> ???<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script> ???<script type="text/javascript"> ???????$(function () { ???????????//按钮点击 ???????????$(‘.J_ajax_submit_btn‘).on(‘click‘,function(){ ???????????????if($(‘#agreeInput‘).length){ ???????????????????if(!($(‘#agreeInput‘).is(‘:checked‘))){ ???????????????????????alert(‘您未同意个人隐私协议‘); ???????????????????????return false; ???????????????????}else{ ???????????????????????var url = ‘http://www.baidu.com‘; ???????????????????????window.location.href=url; ???????????????????} ???????????????} ???????????}); ???????}) ???</script> ???</body></html>

2.判断div是否被选中

<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>判断div是否被选中</title> ???<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" /> ???<meta content="yes" name="apple-mobile-web-app-capable" /> ???<meta content="black" name="apple-mobile-web-app-status-bar-style" /> ???<meta content="telephone=no" name="format-detection" /> ???<style type="text/css"> ???????*{margin:0; padding: 0} ???????body{font:14px/1.4 "Microsoft Yahei",Arial,Helvetica,sans-serif;background-color: #fff;color:#333;max-width: 640px;margin: 0 auto;} ???????a{ text-decoration: none; color: #333 } ???????/*选项卡*/ ???????.form_tab{ overflow: hidden; background-color: #fffdf0; margin:5px 10px; border:1px solid #f9a268; border-radius: 5px;} ???????.ft_top{ overflow: hidden; height: 37px;line-height: 36px;} ???????.ft_top a{float: left; width: 50%; box-sizing: border-box; border-right:1px solid #f9a268; text-align: center; background-color: #ffedda; border-bottom:1px solid #f9a268;} ???????.ft_top a:last-child{ border-right:0} ???????.ft_top a:hover,.ft_top a.current{ background-color: #fffdf0; border-top:2px solid #db2121; color: #db2121;} ???????.ft_top a.current{ border-bottom:0} ???????.ft_con{overflow: hidden;padding:20px 10px ;} ???????.ft_con a{ height: 25px; line-height: 25px; padding:0 10px; border:1px solid #f9a268; background-color: #ffddbb;float:left; margin:0 5px; border-radius: 3px;} ???????.ft_con a.current{ color: #db2121; border-color: #db2121;} ???????/*btn*/ ???????.public_btn_s {padding: 10px 0; margin: 0 10px;} ???????.public_btn_s a { display: block; height: 34px; line-height: 34px; text-align: center; font-size: 18px; background-color: #31b6e7; color: #fff; border-radius: 5px; -o-border-radius: 5px; -ms-border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; } ???</style></head><body> ???<div class="form_tab"> ???????<div class=" ft_top" id="tabMenu"> ???????????<a href="javascript:;" class="current">转盘法(排盘法)</a> ???????????<a href="javascript:;">飞盘法(排盘法)</a> ???????</div> ???????<div class="ft_con "id="tabCon"> ???????????<a href="javascript:;">置润法</a> ???????????<a href="javascript:;">拆补法</a> ???????????<a href="javascript:;">茅山道人法</a> ???????</div> ???</div> ???<div class="public_btn_s"> ???????<a href="javascript:;" class="J_ajax_submit_btn">点击查看</a> ???</div> ???<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script> ???<script type="text/javascript"> ???????$(function () { ???????????$("#tabMenu a").on(‘click‘,function () { ???????????????$(this).addClass(‘current‘).siblings().removeClass(‘current‘); ???????????}); ???????????$(‘#tabCon a‘).on(‘click‘,function () { ???????????????$(this).addClass(‘current‘).siblings().removeClass(‘current‘); ???????????}); ???????????//按钮点击 ???????????$(‘.J_ajax_submit_btn‘).on(‘click‘,function(){ ???????????????if($(‘#tabCon a‘).length){ ???????????????????if(!($(‘#tabCon a‘).is(‘.current‘))){ ???????????????????????alert(‘您未选择排盘方法‘); ???????????????????????return false; ???????????????????}else{ ???????????????????????var url = ‘http://www.baidu.com‘; ???????????????????????window.location.href=url; ???????????????????} ???????????????} ???????????}); ???????}) ???</script> ???</body></html>

效果图:

jQuery判断是否选中

原文地址:https://www.cnblogs.com/huanghuali/p/8868076.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved