How does jquery get the selected value based on the multiple marquee name.

Source: Internet
Author: User

Using the Multi box name to get the selected value can be implemented with the following jquery code

123 $("input:checkbox[name=‘test‘]:checked").each(function() { // 遍历name=test的多选框  $(this).val();  // 每一个被选中项的值});

Example Demo: Give two sets of multi-box, click the button to get two groups of selected items

The sample code is as follows

  1. Creating HTML Elements

    12345678910111213141516 <divclass="box">    <span>请输入用户名,限定字母、数字或下划线的组合:</span>    <divclass="content">        <span>水果:</span>        <inputtype="checkbox" name="fruit"value="梨子"/>梨子        <inputtype="checkbox"name="fruit"value="李子"/>李子        <inputtype="checkbox"name="fruit"value="栗子"/>栗子        <inputtype="checkbox"name="fruit"value="荔枝"/>荔枝        <span>蔬菜:</span>        <inputtype="checkbox"name="vegetable"value="青菜"/>青菜        <inputtype="checkbox"name="vegetable"value="萝卜"/>萝卜        <inputtype="checkbox"name="vegetable"value="土豆"/>土豆        <inputtype="checkbox"name="vegetable" value="茄子"/>茄子    </div>           <inputtype="button"value="提交"></div>
  2. Set CSS Styles

    12345 div.box{width:300px;padding:20px;margin:20px;border:4pxdashed#ccc;}div.box span{color:#999;font-style:italic;}div.content{width:250px;margin:10px0;padding:20px;border:2pxsolid#ff6666;}input[type=‘checkbox‘]{margin:5px;}input[type=‘button‘]{height:30px;margin:10px;padding:5px10px;}
  3. Writing jquery Code

    123456789101112131415 $(function(){    // 设置属性值    $("input:button").click(function() {        varfruit = "";        varvegetable = "";        $("input:checkbox[name=‘fruit‘]:checked").each(function() {            fruit += $(this).val() + " ";        });        $("input:checkbox[name=‘vegetable‘]:checked").each(function() {            vegetable += $(this).val() + " ";        });        alert("已选择水果:"+fruit+",已选择蔬菜:"+vegetable);                });})
  4. Observation effect

How does jquery get the selected value based on the multiple marquee name.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.