Jquery click function with for loop

Question

I will try to re explain the situation: I have a paragraph there are 72 words, and they have a toggleClass and these words are highlighted for the user and have a cursor. When any word is clicked I want to check the check mark according to that. So there is 72 check marks each has one.

    //adding to 72 paragraph words a toggle class
    $(".question_text span").click(function() {
        $( this ).toggleClass( "green" );
    });

    //gives id to every 72 words in the paragrapgh
    $('.question_text span').each(function(idx) {
        $(this).attr('id', 'a' + idx);
    });

    // checkmarks have id #Q15v2_1 to #Q15v2_72

So i want when the first word of the highlighted ones clicked to check check marik #Q15v2_1 when the second one is clicked #Q15v2_2 and so on, but when the word is uncliked the check-mark becomes unchecked

sounds like you should be using a label which does it with no JavaScript needed. — epascarello
– epascarello, Commented Jan 11, 2017 at 15:00

Zorken17 · Accepted Answer · 2017-01-11 12:39:59Z

2

You can loop thru all elements the add a toggle like this:

$(.question_text span).each(function(){
    $(this).click(function(e){
        if($(e.target).is(':checked')) {
            $(this).prop('checked', false);
        } else if($(e.target).is(':checked')) {
            $(this).prop('checked', true);
        }
    })
})

This is only a example, but I think it is the right way to go.

edited Jan 11, 2017 at 12:39

answered Jan 11, 2017 at 12:28

Zorken17

1,8861 gold badge12 silver badges16 bronze badges

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

Comments

Dipiks · Accepted Answer · 2017-01-11 12:38:41Z

0

You can do this:

$('.question_text span').each(function(idx) {
    $(this).attr('id', 'a' + idx);
});

$(document).on('click', '[id*="Q15v2_"]', function() {
  $(this).prop('checked', !$(this).prop("checked"));
});

For the explanation:

I use event delegation: $(document).on('click', '[id*="Q15v2_"]' in case of you add dynamically your element. The selector [id*="Q15v2_"] select all element whose id contains Q15v2_

And this line $(this).prop('checked', !$(this).prop("checked")); toggle the property checked of the element you just clicked

answered Jan 11, 2017 at 12:38

Dipiks

3,9482 gold badges26 silver badges39 bronze badges

Comments

Ced · Accepted Answer · 2017-01-11 14:40:34Z

0

I'll take a different approach than others. Render the [i] with the correct values.

<label for="Q15v2_[i]">text</label>
<input type="checkbox" id="Q15v2_[i]" name="Q15v2_[i]">

That is what label are for, no need for jquery

answered Jan 11, 2017 at 14:40

Ced

17.7k16 gold badges102 silver badges160 bronze badges

1 Comment

Zygimantas Over a year ago

I do not have control over HTML

Collectives™ on Stack Overflow

Jquery click function with for loop

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related