JS/Jquery根据复选框的<checked属性>控制多个对应div的显示/隐藏

<!doctype html><html>
<head>
  <meta charset="utf-8">
  <title>JS/Jquery复选框控制多个对应div的显隐</title>
 <script type="text/javascript" src="jquery-1.11.3.min.js"></script>
</head>
<style type="text/css">
    .shows{
        display: none;
    }
</style>
<body>
      <input type="checkbox" value="dd1" />淘宝<br />
    <input type="checkbox" value="dd2" />新浪<br />
    <input type="checkbox" value="dd3" />网易<br />
    <input type="checkbox" value="dd4" />天猫<br />
  <div id="dd1" class="shows">淘宝</div>
  <div id="dd2" class="shows">新浪</div>
  <div id="dd3" class="shows">网易</div>
  <div id="dd4" class="shows">天猫</div>

<script type="text/javascript">
     $(":checkbox").each(function () {
         $(this).click(function () {
             if ($(this).attr("checked") == "checked") {
                 $("#" + $(this).val()).hide();
                 $(this).attr("checked",false);
             } else {
                 $("#" + $(this).val()).show();
                 $(this).attr("checked",true);
             }
         });
     });
</script>
</body>
</html>

______________

时间: 2024-10-09 19:57:49

JS/Jquery根据复选框的<checked属性>控制多个对应div的显示/隐藏的相关文章

jQuery实现复选框的全选、反选、并且根据复选框的&lt;checked属性&gt;控制多个对应div的显示/隐藏

<!doctype html><html> <head> <meta charset="utf-8"> <title>jQuery实现复选框的全选.反选.并且根据复选框的(checked属性)控制多个对应div的显示/隐藏</title> <script type="text/javascript" src="jquery-1.11.3.min.js"></

jquery中input复选框的checked属性

在今日的多选,反选,全选试验中,关于通过jQuery方法来实现复选框的选中与否问题,我有了以下发现: 1.不能通过.css('checked','checked')方法来设置或者获取复选框的checked属性,在控制台打印输出.css('checked'),结果为undefined, 不管在HTML中是否设置了checked='checked'; 2.通过attr添加属性即.attr('checked','abc'),会给HTML中input所在处添加checked='checked'这样的代码

jQuery实现复选框的全选与全不选

对于复选框的选中checked属性,实在是无力吐槽. 从上图可以看出,当复选框不设置checked属性时,默认没有被选中:其它三种情况,设置checked属性但不设置属性值即置空,或者将checked属性值设为true/false,都是默认被选中. 我们来看看W3C上的介绍: 结合开头的实例,我们可以不给复选框设置checked属性,利用js设置复选框的checked属性值,如下: 由上不难看出,3默认被选中 基于此,全选与全不选就很好做了,此处只贴从最近的一个项目中截取的部分代码,亲测有效:

jQuery 操作复选框(checkbox) attr checked不起作用

jQuery 更改checkbox的状态,无效 $(this).attr("checked", false).checkboxradio("refresh");     //应该这么写吧,少了$这个东东~~~跟js混淆了 jQuery 操作复选框(checkbox) attr checked不起作用 这 天用到jQuery功能,想实现一个简单的复选框动态全选或全不选,结果测试发现 attr(‘checked’,'checked’);与attr(‘checked’,t

jquery实现复选框全选,全不选,反选中的问题

今天试了一下用jquery选择复选框,本来以为很简单的东西却有bug,于是搜索了一下找到了解决方法. html代码如下(这里没有用任何样式,就没有再放css了): <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="test_ch5.css" > <title>test_ch5</title> &

对jquery操作复选框

摘要:jquery操作复选框.使用更简洁易懂,思路清晰,逻辑更明了,很实用 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="jquery-1.11.2.min.js"></script><!--引入jquery-1.11.2.min.js要在最上面--

原生js实现的复选框的全选和全不选效果

原生js实现的复选框的全选和全不选效果:使用jquery实现复选框的全选和全部选效果非常的简单,这里就不介绍了,具体可以参阅jQuery实现的checkbox复选框全选和全不选效果一章节,下面介绍一下如何使用原生javascript实现此效果,代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" conten

jquery获取复选框checkbox的值

jQuery API : each(callback) :以每一个匹配的元素作为上下文来执行一个函数. :checked :匹配所有选中的被选中元素(复选框.单选框等,不包括select中的option) Js代码 收藏代码 //js获取复选框值 var obj = document.getElementsByName("interest");//选择所有name="interest"的对象,返回数组 var s='';//如果这样定义var s;变量s中会默认被赋

用Jquery实现复选框的全选

<html><head> <title>用Jquery实现复选框的全选</title> <script src="../javascript/jquery-1.4.2.min.js"></script> <script type="text/javascript"> $(function () { $(function() { $("#checkAll").cli