如何在jquery中创建一个已复选的表单?

时间:2016-04-26 07:22:30

标签: jquery forms checkbox

我是jquery的新手并且正在努力解决它。我找到了这个网站,希望得到帮助。我需要创建一个复选框列表,当我选择一个或多个复选框,然后单击提交时,它会显示一个名称和链接组合。因此,如果我有一个复选框格式的资源列表,我单击写入和数学复选框,然后单击提交,它将给我写字。当我点击该单词时,它会将我带到一个写作页面。这是我的列表和提交按钮

<h2 id="studentr">Student Resources</h2>

<section id="information">   
<div id="studentbox">  
<p id="choose">Choose at least one resource and click the 'Show Me' button to display links to selected resources</p> 

<form id="checkboxlist" action="">
<input type="checkbox" name="Career Preparation" id="career" value="https://students.asu.edu/careerguide/careerpreparation">Career Preparation<br>
<input type="checkbox" name="College Advising" id="advising" value="https://http://poly.engineering.asu.edu/advising">College Advising<br>
<input type="checkbox" name="Counseling Services" id="counseling" value="https://students.asu.edu/counseling">Counseling Services<br>
<input type="checkbox" name="Finanical Aid" id="fiancialaid" value="https://students.asu.edu/financialaid">Finanical Aid<br>
<input type="checkbox" name="Fitness and Recreation" id="fitnessandrecreation" value="http://fitness.asu.edu/">Fitness and Recreation<br>
<input type="checkbox" name="Health Services" id="healthservices" value="https://students.asu.edu/health">Health Services<br>
<input type="checkbox" name="Housing" id="housing" value="http://housing.asu.edu/home">Housing<br>
<input type="checkbox" name="Library" id="library" value="http://lib.asu.edu/">Library<br>
<input type="checkbox" name="Parking" id="parking" value="https://cfo.asu.edu/pts">Parking<br>
<input type="checkbox" name="scholarships" id="scholarships" value="https://students.asu.edu/scholarships">Scholarships<br>
<input type="checkbox" name="Student Employment" id="employment" value="https://students.asu.edu/employment">Student Employment<br>
<input type="checkbox" name="Student Organizations" id="organizations" value="http://asu.orgsync.com/">Student Organizations<br>
<input type="checkbox" name="Tutoring Support" id="tutoring" value="https://tutoring.asu.edu/">Tutoring Support<br>
<input type="checkbox" name="Writing Support" id="writing" value="https://tutoring.asu.edu/writing-centerst">Writing Support<br>
</form>


<button id="RB1" type="button">Show Me the Resources</button>
</div>  

</section>

<div id="results">
<h3 id="pr">Results</h3>
<p id="statement">You have selected:</p>
</div>

1 个答案:

答案 0 :(得分:1)

尝试以下方法:

$('#RB1').click(function() {
  var text = '';
  $('[type="checkbox"]:checked').each(function(i, el) {
    text += '<a href="' + $(el).attr('value') + '">' + $(el).attr('name') + '</a></br>'
  });
  $('#statement').append(text);
});

https://migs.mastercard.com.au/vpcpay?vpc_AccessCode=value&vpc_Amount=100&vpc_Command=pay&vpc_Locale=en&vpc_Merchant=TESTvalue&vpc_MerchTxnRef=value160426&vpc_OrderInfo=value&vpc_ReturnURL=http%3a%2f%2fgoogle.com&vpc_Version=1&vpc_SecureHash=6d84a03c6c41f06e945f618657b4a93a