使用jquery隐藏/显示基于复选框的链接

我知道这是在这个论坛上的常见问题，但我找不到具体的解决方案。使用jquery隐藏/显示基于复选框的链接

我想要做的是动态显示基于复选框选择的HTML链接。我很难弄清楚我做错了什么，代码在这一点上似乎没有做任何事情。

以下是代码。

<!doctype html> 
<html lang="en"> 

<head> 
<meta charset="utf-8"> 
<meta name="description" content="GIT Courses" /> 

<title>GIT Courses</title> 
<link href="courses3.css" rel="stylesheet" type="text/css"> 
<!-- We include the jQuery CSS, API, and UI from CDN in the Head --> 
<!-- Most browsers have CDN fed libraries already in cache, as they are used very frequently --> 
<!-- This will speed up load times, reduce bandwidth use, and serve from closest geographical servers --> 
<!-- Ref: http://stackoverflow.com/questions/2180391/why-should-i-use-googles-cdn-for-jquery --> 
<link 
    href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" 
    type="text/css" rel="Stylesheet" /> 
<script src="http://code.jquery.com/jquery-1.9.1.js" 
    type="text/javascript"></script> 
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js" 
    type="text/javascript"></script> 

</head> 

<body> 



    <div id="wrapper"> 

     <header> 

      <div class=" headleft"></div> 
      <div class="headright"> 
       <h1>Graphic Information Technology</h1> 
      </div> 

      <!-- end header --> 
     </header> 

     <nav> 
      <table class="navigation"> 
       <thead> 

        <tr> 
         <th><a href="new2.html">home</a></th> 
         <th><a href="courses3.html">courses</a></th> 
         <th><a href="resources.html">resources</a></th> 
         <th><a href="labs.html">lab</a></th> 
        </tr> 

       </thead> 

      </table> 

      <!-- end nav --> 
     </nav> 

     <!-- Begin HTML elements --> 
     <h3>Thank you for your interest in our Developer courses!</h3> 
     <p>Please select which campus resources you would like to explore 
      more below:</p> 
     <!-- Here is a "Field set" Array for the Resource Check Boxes --> 
     <!-- We will leave the links out of the labels at this stage --> 
     <fieldset id="checkboxArray"> 
      <legend>ASU Resources</legend> 
      <label><input type="checkbox" name="rescheck[]"value="Career Preparation" />Career Preparation</label> 
      <label><input type="checkbox" name="rescheck[]" value="College Advising" />College Advising</label> 
      <label><input type="checkbox" name="rescheck[]"value="Counseling Services" />Counseling Services</label> 
      <label><input type="checkbox" name="rescheck[]" value="Financial Aid" /> Financial Aid </label> 
      <label><input type="checkbox" name="rescheck[]"value="Fitness &amp; Recreation" /> Fitness & Recreation </label> 
      <label><input type="checkbox" name="rescheck[]" value="Health Services" /> Health Services </label> 
      <label><input type="checkbox" name="rescheck[]"value="Housing" /> Housing </label> 
      <label><input type="checkbox"name="rescheck[]" value="Library" /> Library </label> 
      <label><input type="checkbox" name="rescheck[]" value="Parking" /> Parking </label> 
      <label><input type="checkbox" name="rescheck[]" value="Scholarships" /> Scholarships </label> 
      <label><input type="checkbox" name="rescheck[]" value="Student Employment" /> Student Employment </label> 
      <label><input type="checkbox" name="rescheck[]" value="Student Organizations" /> Student Organizations </label> 
      <label><input type="checkbox" name="rescheck[]" value="Tutoring Support" /> Tutoring Support </label> 
      <label><input type="checkbox" name="rescheck[]" value="Writing Support" /> Writing Support </label> 
     </fieldset> 

     <!-- Here we display the resources selected. 
    One way (well the only way I know how) is to Toggle visibility of DIVs based on selection. 
    The toggle is done within jQuery, here is the HTML side of it. 
    Maybe not the best practice but it works, I never did take any classes on any of this :) --> 

     <div class="myResources"> 
      <p>Here are the links to your selected resources:</p> 
      <div class="resource" resource-label="Career Preparation"> 
       <a href="https://students.asu.edu/careerguide/careerpreparation">Career 
        Preparation</a> 
      </div> 
      <div class="resource" resource-label="College Advising"> 
       <a href="https://technology.asu.edu/advising">College Advising</a> 
      </div> 
      <div class="resource resource-label="Counseling Services"> 
       <a href="https://students.asu.edu/counseling">Counseling 
        Services</a> 
      </div> 
      <div class="resource" resource-label="Financial Aid"> 
       <a href="https://students.asu.edu/financialaid">Financial Aid</a> 
      </div> 
      <div class="resource" 
       resource-label="Fitness &amp; Recreation"> 
       <a href="http://fitness.asu.edu/">Fitness & Recreation</a> 
      </div> 
      <div class="resource" resource-label="Health Services"> 
       <a href="https://students.asu.edu/health">Health Services</a> 
      </div> 
      <div class="resource" resource-label="Housing"> 
       <a href="http://housing.asu.edu/home">Housing</a> 
      </div> 
      <div class="resource" resource-label="Library"> 
       <a href="http://lib.asu.edu/">Library</a> 
      </div> 
      <div class="resource" resource-label="Parking"> 
       <a href="https://cfo.asu.edu/pts">Parking</a> 
      </div> 
      <div class="resource" resource-label="Scholarships"> 
       <a href="https://students.asu.edu/scholarships">Scholarships</a> 
      </div> 
      <div class="resource" resource-label="Student Employment"> 
       <a href="https://students.asu.edu/employment">Student Employment</a> 
      </div> 
      <div class="resource" resource-label="Student Organizations"> 
       <a href="http://asu.orgsync.com/">Student Organizations</a> 
      </div> 
      <div class="resource" resource-label="Tutoring Support"> 
       <a href="https://studentsuccess.asu.edu/">Tutoring Support</a> 
      </div> 
      <div class="resource" resource-label="Writing Support"> 
       <a href="https://studentsuccess.asu.edu/writingcenters">Writing 
        Support</a> 
      </div> 

      <!-- end of content wrapper --> 
     </div> 
     <!-- End of HTML Elements --> 
     <!-- Suggested best practice is to put all Scripts at the bottom of the page, just before the End of Body Tag --> 
     <!-- This is to speed up page loading time --> 
     <!-- Ref: http://stackoverflow.com/questions/2105327/should-jquery-code-go-in-header-or-footer --> 
     <!-- jQuery code begins here --> 
     <script type="text/javascript"> 
    // We place all jQuery code inside this "Document Ready" handler to ensure everything loaded completely before running code 
    $(document).ready(function() { 
     // bind to click function 
     $('input[type="checkbox"]').click(function() { 
      // test if any are checkboxes in the array are checked 
      if ($('input[name="rescheck[]"]:checked').length > 0) { 
       // hide all resources until... 
       $('.resource >div').hide(); 
       // we loop checked boxes and show div. 
       $("input[name='rescheck[]']:checked").each(function() { 
        $('.resource >div[resource-label=' + this.id + ']').show(); 
       }); 
       // hmm... at least that was the idea 
       //FIXME: Why didn't this hide? 
      } else { 
       // none checked - hide all 
       $('.resource >div').hide(); 
      } 
     }); 
    }); 
</script> 
    </div> 
</body> 
</html>

来源

2013-03-19 Gary Stewart

如果复选框与相关div的顺序相同，请使用元素索引作为参考。

$('input[name^="rescheck"]').click(function() { // if checkbox clicked 
    var index = $(this).parent().index(); // gets parent index since nested in label 
    $('.resource:eq(' + index + ')').toggle() // hide or show related div 
});

退房这个fiddle

来源

2013-03-19 19:54:52 kingkode

您应该使用Attribute Starts With Selector [name^="value"]

$('input[name^="rescheck"]:checked')

您的代码应该是这样的： -

$('.resource').hide(); 
$('input[type="checkbox"]').click(function() { 
    $("input[name^='rescheck']").each(function() { 
     if ($(this).is(":checked")) 
      $('div[resource-label="'+this.value+'"]').show(); 
     else 
      $('div[resource-label="'+this.value+'"]').hide(); 
    }); 
});

参考LIVE DEMO

来源

2013-03-19 19:37:28

你有几个错误的你的HTML，我不知道如果这些都是你的实际脚本错别字或错误而格式化这里，但此行需要收拾一下：

<div class="resource resource-label="Counseling Services">

通知的resource-label目前的元素类属性的一部分。

你可以尝试沿着这些线为你的jQuery的东西，使它更简单一些。

$('#checkboxArray').on('click', 'input[type="checkbox"]', function(event) 
{ 
    var resources = $('.myResources'); 

    // Hide all resources 
    resources.children('div').hide(); 

    // Cycle through the checkboxes siblings 
    $(this).siblings().each(function(index) 
    { 
     // If they are checked show the resource 
     if ($(this).is(':checked') 
     { 
      resources.find('div[resource-label="' + $(this).val() + '"]').show(); 
     } 
    }); 
}

来源

2013-03-19 19:47:02

这里提供的答复每一个值得向上投票或几个。谢谢，我还没有机会测试这些代码，但这些示例和建议非常有帮助。

来源

2013-03-20 04:31:45

使用jquery隐藏/显示基于复选框的链接

回答

相关问题