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

不管是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");});}});});

转载于:https://www.cnblogs.com/KnowEditByW/p/8462463.html

jquery中单选选中及清除选中状态相关推荐

vue中单选框设置默认选中值
vue中单选框的默认选中不同于传统方式设置checked,是通过在data中设置vulue来实现的 html部分是通过v-for取的后台的数据 <li v-for="(value,i) ...
JS与CSS阻止元素被选中及清除选中的方法总结
有时候,我们希望阻止用户选中我们指定区域的文字或内容. 举个栗子,有时候用户在一个区域执行频繁的点击操作,一不小心傲娇地点多了,就会选中当前区域的内容. 再举个栗子,制作轮播组件的时候,点击下一页,若 ...
vue+element 表格中全选与清除选中
表格中添加事件@selection-change (回调参数为选中的选项) 事件名说明参数 select 当用户手动勾选数据行的 Checkbox 时触发的事件 selection, row s ...
jQuery中设置树节点被选中
var zTree = $.fn.zTree.getZTreeObj("treeDemo_add");//获取到树元素 var node = zTree.g ...
php中单选框可以默认选中吗,php selectradio和checkbox默认选择的简单示例
这篇文章主要为大家详细介绍了php selectradio和checkbox默认选择的简单示例,具有一定的参考价值,可以用来参考一下. 感兴趣的小伙伴,下面一起跟随512笔记的小玲来看看吧!这是扩展y ...
vue 复选框默认选中_vue 实现单选框设置默认选中值
vue 实现单选框设置默认选中值 vue中单选框的默认选中不同于传统方式设置checked,是通过在data中设置vulue来实现的 html部分是通过v-for取的后台的数据生成后的代码就是 js ...
html单选框选中状态,jquery如何判断单选框是否被选中？
jquery如何判断单选框是否被选中?下面本篇文章就来给大家介绍一下Jquery判断单选框是否选中和获取选中值的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 方法1:利用选中 ...
Jquery判断单选框是否选中和获取选中的值
第一种:利用选中值判断选中 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http ...
php判断单选框是否被选中,JQuery form验证单选框是否选中经验总结
这篇文章主要介绍了JQuery form表单提交前验证单选框是否选中.删除记录时验证经验总结,非常不错,具有参考借鉴价值,需要的朋友参考下吧先上三张效果图: 这些功能在Java Web开发中可能是经 ...
复选框选中状态html,javascript中如何判断checkbox是否选中？
javascript判断checkbox是否选中的方法:1.直接通过checkbox的checked属性判断.2.调用jQuery使用attr()或is()方法判断. 对于在js中来判断checkbo ...

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

jquery中单选选中及清除选中状态相关推荐

最新文章

热门文章