Changing input box also need to find check box checked or not in JS

Question

I have input box along with checkbox in table <td> like below,

<td>
    <input class="Comment" type="text" data-db="comment" data-id="{{uid}}"/>
    <input type="checkbox" id="summary" title="Check to set as Summary" />
</td>

Based on check box only the content of input box will be stored in DB.

In the JS file, I tried like

var updateComment = function( eventData )
{
    var target = eventData.target;
    var dbColumn = $(target).attr('data-db');
    var api = $('#api').val();
    var newValue = $(target).val();
    var rowID = $(target).attr('data-id');
    var summary = $('#summary').is(':checked');
    params = { "function":"updatecomments", "id": rowID, "summary": summary };
    params[dbColumn] = newValue;
    jQuery.post( api, params);
};

$('.Comment').change(updateComment);

But the var summary always returning false.

I tried so many ways prop('checked'),(#summary:checked).val() all are returning false only.

How to solve this problem?

you have not put `$` in `('#summary').is(':checked');` . Do `$('#summary').is(':checked');` — Parth Trivedi, Jan 29 '16 at 11:11

score 1 · Answer 1 · answered Jan 29 '16 at 11:14

1

You have missed the jQuery function --> $

 $('#summary').is(':checked')

('#summary') is a string wrapped in Parentheses. $ is an alias for the jQuery function, so $('#summary') is calling jquery with the selector as a parameter.

answered Jan 29 '16 at 11:14

Carlo

2,103
21
29

Shashank Agrawal · Accepted Answer · 2016-01-29T12:54:17.750

1

Looks like you have multiple rows of checkboxes + input fields in your table. So doing $('#summary').is(':checked') will return the value of first matching element since id in a DOM should be unique.

So, modify your code like this:

<td>
    <input class="Comment" type="text" data-db="comment" data-id="{{uid}}"/>
    <input type="checkbox" class="summary" title="Check to set as Summary" />
</td>

And, instead of $('#summary').is(':checked'); you can write like this:

var summary = $(target).parent().find(".summary").is(':checked');

By doing this, we are making sure that we are checking the value of checkbox with the selected input field only.

Update: For listening on both the conditions i.e. when when checking checkbox first and then typing input box and when first typing input box and then checked:

Register the change event for checkbox:

// Whenever user changes any checkbox
$(".summary").change(function() {
    // Trigger the "change" event in sibling input element
    $(this).parent().find(".Comment").trigger("change");
});

edited Jan 29 '16 at 12:54

answered Jan 29 '16 at 12:14

Shashank Agrawal

25,161
11
89
121

Agarwal..wow!!..good catch..it is working perfectly..but working when checking checkbox first and then typing input box,not working first typing input box and then checked..is there any other way to check both the conditions? – Nithya.K Jan 29 '16 at 12:33
Thank you so much..its working fine.. I edited like `$(".summary").change(function() { $(this).parent().find(".Comment").trigger("change"); }); var summary = $(target).parent().find(".summary").is(':checked');` is this correct form? – Nithya.K Jan 29 '16 at 12:50
Glad this works! I didn't get your question. What is the use of `var summary = $(target).parent().find(".summary").is(':checked');` after the `.change()` function? – Shashank Agrawal Jan 29 '16 at 12:57
Thats my question..use of `var summary`.but I need to pass 'summary' value(true or false) to api..thats why I used after `.change()` function..is this wrong? – Nithya.K Feb 01 '16 at 08:56

score 0 · Answer 3 · edited May 23 '17 at 12:23

0

Use like this

var summary = $('#summary').prop('checked');

The prop() method gets the property value

For more details, please visit below link.

https://stackoverflow.com/a/6170016/2240375

edited May 23 '17 at 12:23

Community

1
1

answered Jan 29 '16 at 11:35

RIYAJ KHAN

15,032
5
31
53

Still it returning false only. – Nithya.K Jan 29 '16 at 11:41

score 0 · Answer 4 · answered Jan 29 '16 at 11:41

0

My experience is that attr() always works.

var chk_summary = false;

var summary = $("#summary").attr('checked');
if ( summary === 'checked') {
    chk_summary = true;  
}

and then use value chk_summary

answered Jan 29 '16 at 11:41

bestprogrammerintheworld

5,417
7
43
72

Now also false only..I think the problem is with jquery version..I am using jquery v1.11.2..am I wrong? – Nithya.K Jan 29 '16 at 11:50

Jai · Answer 5 · 2016-01-29T12:31:15.647

0

Change all the occurrences of

 eventData

To

event

because event object has a property named target.

And you should have to know change event fires when you leave your target element. So, if checkbox is checked first then put some text in the input text and apply a blur on it, the it will produce true.

edited Jan 29 '16 at 12:31

answered Jan 29 '16 at 12:14

Jai

74,255
12
74
103

Changing input box also need to find check box checked or not in JS

5 Answers5