JQueryData/Day8AdvanceSelectorUsingLabels.html at master · ulhas0706/JQueryData · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<html>
    <head>
        <script src="jquery-3.1.1.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $("input[name='computer']").click(function(){
                    getData("computer");
                });

                var getData=function(data){
                    var dataFinal="";
                    var result=$("input[name='"+data+"']:checked");
                    result.each(function(){

                        var selval=$(this).val();

                        dataFinal+=selval+"-"+$("label[for='cb-"+selval+"']").text()+"<br>";
                    });
                    $("#display"+data).html(dataFinal);
                }
            });

        </script>

    </head>


    <body>
        <input type="checkbox" name="computer" value="js">
        <label for="cb-js">jQuery</label>
        <input type="checkbox" name="computer" value="ht">
        <label for="cb-ht">HTML</label>
        <input type="checkbox" name="computer" value="cs">
        <label for="cb-cs">CSS</label>
        <input type="checkbox" name="computer" value="aj">
        <label for="cb-aj">AngularJs</label>
        <br/><br/><br/>
        <input type="checkbox" name="countires" value="in">
        <label for="cb-in">India</label>
        <input type="checkbox" name="countires" value="US">
        <label for="cb-US">USA</label>
        <input type="checkbox" name="countires" value="can">
        <label for="cb-can">Canada</label>
        <input type="checkbox" name="countires" value="Aus">
        <label for="cb-aus">Australia</label>
        <br/><br/><br/>
        <button id="computer">CompterData</button>
          <button id="countires">Countries</button>
        <div id=displaycomputer>
        </div>
        <div id=displaycountires>
        </div>

    </body>


</html>