Jquery getting the value of a parent element input when checking a child checkbox

Question

I have this set of forms, when the user checks the input, I need to get the value that is outside this div, basically a parent div, try it to do it using .parent() and then find but could not make it work, not sure what do I am doing wrong, I have a js http://jsfiddle.net/creativestudio/bCgeD/2/

This is my js:

                    function set_index_id_checkbox() {
                        $("input:checkbox[name='like']").each(function(index){
                            var currElem = $(this);
                            var prevLabel = currElem.next();
                            currElem.attr("id", this.id + index);
                            prevLabel.attr("for", prevLabel.attr("for") + index);
                        });
                    }

                    set_index_id_checkbox();


                    function getValues(){
                        $("input:checkbox[name='like']").click(function(){
                            if (this.checked) {
                               $(this).closest('.reply-form').find('.feedback_nid').text(this.value);
                            } else {
                              // ...
                            }
                       });
                    } getValues();

and this is my html:

        <input type="hidden" class="feedback_nid" value="form a 111">
        <input type="hidden" class="branch_nid" value="form a 222">

        <div class="block">
            <!-- value -->
            <span class="info-item float-left value">
                <span class="likes">value</span>
            </span><!-- /.value -->
            <!-- checkbox -->
            <div class="btn like-checkbox float-right">
                     <input id="like" class="like" type="checkbox" name="like" value="33">
                     <label class="like" for="like">like 1</label>
            </div><!-- /checkbox -->
        </div>

        </div>

        <div class="reply-form">
        <input type="hidden" class="feedback_nid" value="form a 111">
        <input type="hidden" class="branch_nid" value="form a 222">
        <div class="block">
            <!-- value -->
            <span class="info-item float-left value">
                <span class="likes">value</span>
            </span><!-- /.value -->
            <!-- checkbox -->
            <div class="btn like-checkbox float-right">
                     <input id="like" class="like" type="checkbox" name="like" value="45">
                     <label class="like" for="like">like 2</label>
            </div><!-- /checkbox -->
        </div>
        </div>

        <div class="reply-form">
        <input type="hidden" class="feedback_nid" value="form a 111">
        <input type="hidden" class="branch_nid" value="form a 222">
        <div class="block">
            <!-- value -->
            <span class="info-item float-left value">
                <span class="likes">value</span>
            </span><!-- /.value -->
            <!-- checkbox -->
            <div class="btn like-checkbox float-right">
                     <input id="like" class="like" type="checkbox" name="like" value="66">
                     <label class="like" for="like">like 3</label>
            </div><!-- /checkbox -->
        </div>
        </div>​

Answer 1

In the code you are trying to set the html of hidden input field..

.find('.feedback_nid').html(this.value);

Input element's have no inner HTML..

Maybe you are looking for .val(this.value)

Also you can access the checkboxes using the class like instead of attribute selector..

I am instead populating the span with class="likes" and seems to be working fine..

Check Fiddle

Answer 2

Try parents, parent will only search one div higher, but parents will search the file until it find the div if exist.

See the jquery documention: Jquery parent

Answer 3

The span with text Value in it is a different class likes not the class feedback_nid you have set for a hidden input.

If you want the hidden input to have the same value use val() for the input and set the span using text()

Answer 4

http://jsfiddle.net/gunderson/bCgeD/4/

I updated your example to work in jsfiddle.

The main change I made was traversing up the tree using .parent() until I got to the div that containes the value you're looking for. Additionally I updated your syntax to pull the value out of the hidden field using jquery.val();

 function getValues(){
    $("input:checkbox[name='like']").click(function(){
        if (this.checked) {
           var value = $(this).parent().parent().parent()
               .find('.feedback_nid').val();
            $(this).parent().parent().find(".likes").text(value);
        } else {
          // ...
        }
   });
} getValues();