分享web开发知识

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

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

jquery中单选选中及清除选中状态

发布时间:2023-09-06 01:43责任编辑:蔡小小关键词:暂无标签

不管是checkbox(多选)还是radio(单选) 添加checked属性时候建议用prop而不用attr

单选用attr点击一次添加checked="checked"属性,点击第二次页面上才显示选中状态

多选用attr只有第一次点击有效,其余的不会标识为选中状态

 ////1、单选示例

//html代码 ?????<ul> ???????????????????<li class="li_check"> ???????????????????????<input class="check_box" checked="checked" type="radio" name="sort" value="1" id="sort_one" /><label for="sort_one">1</label> ???????????????????</li> ???????????????????<li class="li_check"> ???????????????????????<input class="check_box" type="radio" name="sort" value="2" id="sort_two" /><label for="sort_two">2</label></li> ???????????????????<li class="li_check"> ???????????????????????<input class="check_box" type="radio" name="sort" value="3" id="sort_three" /><label for="sort_three">3</label></li> ???????????????????????????????</ul>
//js代码 $(".check_box").click(function () { ???????????if ($(this).prop("checked") != "checked") ???????????{ ???????????????$(".check_box").each(function () { ???????????????????$(this).removeAttr("checked"); ???????????????}); ???????????????$(this).prop("checked", "checked"); ???????????} ???????});

///2、多选示例

//html代码
<span class="check-all">全选</span>
<ul> ???????????????????<li class="li_check"> ???????????????????????<input class="check_box" checked="checked" type="checkbox" name="sort" value="1" id="sort_one" /><label for="sort_one">1</label> ???????????????????</li> ???????????????????<li class="li_check"> ???????????????????????<input class="check_box" type="checkbox" name="sort" value="2" id="sort_two" /><label for="sort_two">2</label></li> ???????????????????<li class="li_check"> ???????????????????????<input class="check_box" type="checkbox" name="sort" value="3" id="sort_three" /><label for="sort_three">3</label></li> ???????????????????????????????</ul>
//js代码 ?$(".check_box").click(function () { ???????????if ($(this).attr("checked") == "checked") { ???????????????$(this).removeAttr("checked", "checked"); ???????????} ???????????else { ???????????????$(this).attr("checked", "checked"); ???????????} ???????}); ??????????????$(function () { ???????????var click = 0; ???????????$(".check-all").click(function () { ???????????????click = click + 1; ???????????????if (click % 2 == 1) { ???????????????????$(".check_box").prop("checked", "checked"); ???????????????????$(".check_box").each(function () { ???????????????????????$(this).attr("checked", "checked"); ???????????????????}); ???????????????} ???????????????else { ???????????????????$(".check_box").removeAttr("checked", "checked"); ???????????????????$(".check_box").each(function () { ???????????????????????$(this).removeAttr("checked", "checked"); ???????????????????}); ???????????????} ???????????}); ???????});

jquery中单选选中及清除选中状态

原文地址:https://www.cnblogs.com/KnowEditByW/p/8462463.html

知识推荐

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