Retrieving values from for loop into jquery

Question

How do I retrieve values from @for loop into jquery..Each value inside for loop should have different id, and jquery should get each separate id.... My for loop,

@for (int i = 0; i < searchList.Count;i++ )
{
    <label for="input@i"><input type="checkbox" id="input@i"/>@searchList[i]   </label>
}

My jquery which isn't helping,

  $("#input@i").on("click", function () {
    var currentChk = $(this);
    var propCheck = currentChk.prop("checked");
    if (propCheck) {
        debugger;
        var valChk = $("#input@i").val();
        alert(valChk);
    }
});

Thanks in advance...

I am totally confused! do you want to generate lable and input using jQuery for loop? — Sunil B N
– Sunil B N, Commented May 7, 2015 at 5:19

Adil · Accepted Answer · 2015-05-07 06:40:20Z

2

You can use Attribute Starts With Selector to bind the event.

$("[id^=input]").on("click", function () {
    var currentChk = $(this);
    var propCheck = currentChk.prop("checked");
    if (propCheck) {
        debugger;
        var valChk = $("#input@i").val();
        alert(valChk);
    }
});

As the id of both label and input-checkbox starts with 'input' the click event will bind to both of them. If you want to restrict you can add type to the selector, for instance you want only on checkbox you can change selector as under.

$("input[id^=input]").on("click", function () {...

or

$(":checkbox[id^=input]").on("click", function () {...

If you assign a class to the control you want to attach event then you can use class selector to bind the event.

@for (int i = 0; i < searchList.Count;i++ )
{
    <label for="input@i"><input type="checkbox" class="chk-class" id="input@i"/>@searchList[i]   </label>
}


$(".chk-class").on("click", function () {...

Edit As Mohamed-Yousef pointed you should use currentChk preferably or $(this) instead of $("#input@i") in statement $("#input@i").val(); as @i will not be the substituted value by C# loop but it will be added as string literal.

As a additional note you may use native javascript whenever possible and suitable e.g I would use this.checked instead of currentChk.prop("checked") to get the better performance, readability and simplicity.

$("[id^=input]").on("click", function () {   
    if (this.checked) 
    {
        //your code
    }
    else 
    {
        //your code
    }    
});

edited May 7, 2015 at 6:40

answered May 7, 2015 at 5:15

Adil

148k25 gold badges217 silver badges207 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Mohamed-Yousef Over a year ago

$("#input@i"). I think it should be $(this) or currentChk :)

Andrew Shepherd Over a year ago

What happens with the line valChk = $("#input@i") ?

Adil Over a year ago

Thanks @Mohamed-Yousef, you correctly pointed. I responded late as I was away now updated answer as well.

Sunil B N · Accepted Answer · 2015-05-07 05:32:52Z

0

if you want to trigger onclick for all input

$("input").click(function () {
    var currentChk = $(this);
    var propCheck = currentChk.prop("checked");
    if (propCheck) {
        var valChk = "Id:" + this.id + " Value:" + this.value;
        alert(valChk);
    }
});

answered May 7, 2015 at 5:32

Sunil B N

4,2251 gold badge33 silver badges53 bronze badges

Comments

Vishwajeet Bose · Accepted Answer · 2015-05-07 05:37:09Z

0

    $("input:checkbox [id^=input]").click(function(){
         if ($(this).is(":checked")) {
             var valChk = $("this").val();
             alert(valChk);
         }
    });

this another option you can use

answered May 7, 2015 at 5:37

Vishwajeet Bose

4303 silver badges12 bronze badges

Collectives™ on Stack Overflow

Retrieving values from for loop into jquery

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related