0

Below is my original code...

    innerTC.find('input[name=tc0]').click(function(){
            console.log($(this).siblings('input[name=tc0]'));
            $(this).siblings('input[name=tc0]').prop('checked', false);
    });
    innerTC.find('input[name=tc1]').click(function(){
            console.log($(this).siblings('input[name=tc1]'));
            $(this).siblings('input[name=tc1]').prop('checked', false);
    });
    innerTC.find('input[name=tc2]').click(function(){
            console.log($(this).siblings('input[name=tc2]'));
            $(this).siblings('input[name=tc2]').prop('checked', false);
    });

However, I try to refactor it to a function code like below...

    var innerTC = $('#pltc').contents();
    for(var i=0; i<3; i++) {
        innerTC.find('input[name=tc' + i + ']').click(function(){
            $(this).siblings('input[name=tc' + i + ']').prop('checked', false);
    });
    }

But not working.

Dreams
  • 8,288
  • 10
  • 45
  • 71
  • @epascarello I don't think this is a duplicate - the loop index variable is being frozen into strings. – Pointy Mar 24 '16 at 13:01
  • I think the problem is `var innerTC = $('#pltc').contents();` – Pointy Mar 24 '16 at 13:02
  • 1
    This should be fairly straightforward to fix, however it appears you have both textbox and checkbox input elements with the same names. Could you please edit your question to include a HTML example. – Rory McCrossan Mar 24 '16 at 13:02
  • 1
    @Pointy Well than there is more than one issue is you think it is a contents issue. – epascarello Mar 24 '16 at 13:02
  • And so, what means not working??? – A. Wolff Mar 24 '16 at 13:03
  • @RoryMcCrossan All of them is checkbox , not textbook. – Dreams Mar 24 '16 at 13:04
  • Ok, I'm confused then as you have a click handler, then select the sibling element of the current element, while providing a selector of the current element, which will never work. We really need to see your HTML. – Rory McCrossan Mar 24 '16 at 13:05
  • @A.Wolff I can check a checkbox and another one which with same name will be unchecked. that is how function work with original code. But with refactor code, it didn't work. – Dreams Mar 24 '16 at 13:05
  • @epascarello yes there are probably other things wrong too. – Pointy Mar 24 '16 at 13:06
  • 2
    This is still the dupe... It is the reference to `i` will be 4 on every click... It is the infamous for loop issue of `i` being a reference. – epascarello Mar 24 '16 at 13:06
  • Your main problem is that that is a Bad refactor. Just the whole idea behind it is bad. You're taking DRY to extreme, as a result you are reducing readability, reducing maintainability, adding complexity as evidenced by your need to post this question and people's struggle to solve it. – Bradley Thomas Mar 24 '16 at 13:08
  • ...but I upvoted the question anyway because I felt your down votes were unduly harsh. – Bradley Thomas Mar 24 '16 at 13:11
  • 2
    @Pointy Can you ellaborate on your first comment? I don't think that loop index being frozen into a string changes something, it will still be 4 on every click just as epascarello notes. – Spyros Mandekis Mar 24 '16 at 13:14
  • 1
    @SpyrosMandekis the string concatenation ... oh wait you're right. Sorry. Lack of coffee in the morning makes me forget not to post until I've had coffee. – Pointy Mar 24 '16 at 13:15
  • @aBloomer [here](http://www.sitepoint.com/5-javascript-interview-exercises/) you can find Question #1, which explains the problem we're talking about, and why your loop fails. – Spyros Mandekis Mar 24 '16 at 13:18
  • Can someone re-close this once again with http://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example` – epascarello Mar 24 '16 at 13:19

1 Answers1

3

Try this:

 innerTC.find('input[name^=tc]').click(function(){
            var attr = $(this).attr('name');
            $(this).siblings('input[name='+attr+']').prop('checked', false);
    });

https://jsfiddle.net/y7yre4nt/

madalinivascu
  • 32,064
  • 4
  • 39
  • 55
  • This fixes the issue but logically it makes no sense. You're selecting the current element as a `sibling()` of itself... – Rory McCrossan Mar 24 '16 at 13:06
  • @RoryMcCrossan `You're selecting the current element as a sibling() of itself` How that? – A. Wolff Mar 24 '16 at 13:07
  • `this` = the element that raised the click. `attr` = the name of the current element. `$(this).siblings('input[name='+attr+']')` = get the siblings of the current element with the name of the current element, it makes no sense. – Rory McCrossan Mar 24 '16 at 13:09
  • @RoryMcCrossan But as more than one element can get same name, i don't see the issue here. Or i complelty misunderstood your previous comment. That's said, if only OP has posted relevant HTML markup, it would helped for sure, to make it clearer. That's said, just sounds like OP wants to use radio buttons, not checkboxes... (even a radio button cannot be uncheked manually) – A. Wolff Mar 24 '16 at 13:11
  • True, it's possible my assumptions about the HTML are incorrect. We really, really need the OP to provide a sample to make things a lot clearer. – Rory McCrossan Mar 24 '16 at 13:12
  • @RoryMcCrossan If the original code worked...than there is no issue. It is the infamous for loop question that gets marked as a dupe every day. But since someone reopened my close vote I can not mark it again.... – epascarello Mar 24 '16 at 13:16