checkbox group get value of checked checkbox jquery

Question

Ive been searching for idea on how to get value of checkbox group but i need to the x and y for this so far what i have seen is only with one so i havent really found any relevant answer or idea to my problem so i will explain what i want to happend. In my X i have a number of columns namely first quarter,second quester,third quarter and fourth quarter in my Y i have names of students. And i also have an extra checkbox option to add additional student. I want to Check the check corresponding to names and quarter. I will used this to track down student who has taken the exam and who has not yet taken the exam. I am wondering how to group the the checkboxes in a way that when i check on it will automatically get the student name and corresponding quarter.

HTML:

<tr>
    <td width="25%">
        <hr/>
    </td>
    <td width="15%">
        <center><span>1st Quarter</span>
        </center>
    </td>
    <td width="15%">
        <center><span>2nd Quarter</span>
        </center>
    </td>
    <td width="15%">
        <center><span>3rd Quarter</span>
        </center>
    </td>
    <td width="20%">
        <center><span>4th Quarter</span>
        </center>
    </td>
</tr>
<tr>
    <td><span>Joe Smith</span>
    </td>
    <td>
        <center>
            <input type="checkbox" name="studentrecord[]" />
        </center>
    </td>
    <td>
        <center>
            <input type="checkbox" name="studentrecord[]" />
        </center>
    </td>
    <td>
        <center>
            <input type="checkbox" name="studentrecord[]" />
        </center>
    </td>
    <td>
        <center>
            <input type="checkbox" name="studentrecord[]" />
        </center>
    </td>
</tr>
<tr>
    <td><span>John Smith</span>
    </td>
    <td>
        <center>
            <input type="checkbox" name="studentrecord[]" />
        </center>
    </td>
    <td>
        <center>
            <input type="checkbox" name="studentrecord[]" />
        </center>
    </td>
    <td>
        <center>
            <input type="checkbox" name="studentrecord[]" />
        </center>
    </td>
    <td>
        <center>
            <input type="checkbox" name="studentrecord[]" />
        </center>
    </td>
</tr>

Check fiddle

Update

$("input[name='student[]']:checked").map(function() {
    var $td = $(this).closest('td'),
        index = $td.index();
    valueToPush.push({
        Quarter: quarter.eq($td.index()).find('span').text().trim(),
        Student: $td.parent().find('td:first-child span').text().trim()
    });
});

please put jsFiddle example,so that your question is understandable. — Death-is-the-real-truth
– Death-is-the-real-truth, Commented Mar 4, 2015 at 7:44
what i want to happened is for example the user checks whatever check boxes for joe smith, I want to be able to record that Joe Smith plus the quarter with check — Brownman Revival
– Brownman Revival, Commented Mar 4, 2015 at 7:50
BTW: The <center> tag is not supported in HTML5. Use CSS instead. The <center> element was deprecated because it defines the presentation of its contents -- it doesn't describe its contents. — Ivan Gerasimenko
– Ivan Gerasimenko, Commented Mar 4, 2015 at 7:55
@IvanGerasimenko i will delete it right away. What is the cleanest way to make the checkbox get two values at the same time?like when i check the first check box for joe i should get Joe Smith and 1 Quarter — Brownman Revival
– Brownman Revival, Commented Mar 4, 2015 at 7:57

Arun P Johny · Accepted Answer · 2015-03-04 08:04:16Z

1

In that case, 1 approach is to create an array of objects where each object represent a checkbox like

$(document).on('click', '#check', function() {    
    var $quarters = $('table tr:first-child td');
    var values = $("input[name='studentrecord[]']:checked").map(function(){
        var $td  = $(this).closest('td'), index = $td.index();
        return {
            quarter: $quarters.eq($td.index()).find('span').text().trim(),
            student: $td.parent().find('td:first-child span').text().trim()
        }
    }).get();
    console.log(values);
});

Demo: Fiddle

Note: No need to use event delegation if the button is present when script $(document).on('click', '#check', function() { }) is executed.

Another option is to store an array of quarters against each student like

$('#check').on('click', function () {
    var $quaters = $('table tr:first-child td'),
        students = {};
    $("input[name='studentrecord[]']:checked").each(function () {
        var $td = $(this).closest('td'),
            student = $td.parent().find('td:first-child span').text().trim();
        if (!students[student]) {
            students[student] = [];
        }
        students[student].push($quaters.eq($td.index()).find('span').text().trim())
    }).get();
    console.log(students);
});

Demo: Fiddle

edited Mar 4, 2015 at 8:04

answered Mar 4, 2015 at 7:55

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

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

5 Comments

Brownman Revival Over a year ago

Sir what do you mean in the note portion of the answer?

Arun P Johny Over a year ago

@HogRider $('#check').on('click', function () {}) instead of $(document).on('click', '#check', function() { })

Brownman Revival Over a year ago

i will go with the second one i think it will be easier to retrieve each value if it is stand alone like the second one

Brownman Revival Over a year ago

Sir one question i want to push the value of these data in

studentdata.push({             $quarters.eq($td.index()).find('span').text().trim(): $td.parent().find('td:first-child span').text().trim()             });

But i get error in line $quarters.eq($td.index()).find('span').text().trim(): $td.parent().find('td:first-child span').text().trim() How can do it in a way it would look like 1st Quarter : Joe Smith it will be easy like this so i can just get it value like studentdata['1st Quarter'] then it will give me names of student with check on first quarter

Brownman Revival Over a year ago

Sir please check update my question is how can i put the variable in quarter to be in the label si that i get

valueToPush.push({         quarter.eq($td.index()).find('span').text().trim(): $td.parent().find('td:first-child span').text().trim()     });

so i can get the Quarter number and Student name to be in one line

ArinCool · Accepted Answer · 2015-03-04 08:03:00Z

1

You can initially track each checkbox click and store them in an array. Later, while clicking the button you can retrieve the Student names and the quarters they appeared in directly. Check this Fiddle

var arrObj = {};

$("input[type='checkbox']").click(function(){
    if($(this).is(':checked')) {
        var studentName = $(this).closest('tr').find('td:first span').html();
        var quarterIndex = $(this).closest('td').index();
        var quarterName = $(this).closest('table').find('tr:first td:eq('+parseInt(quarterIndex)+')').find('span').html();
        if(arrObj[studentName]) {
            arrObj[studentName].push(quarterName);
        } else {
            arrObj[studentName] = [];
            arrObj[studentName].push(quarterName);
        }
    }
});

$(document).on('click', '#check', function() {

    for( var key in arrObj) {
        alert(key+" appeard in: "+arrObj[key]);
    }
});

answered Mar 4, 2015 at 8:03

ArinCool

1,7581 gold badge13 silver badges24 bronze badges

1 Comment

Brownman Revival Over a year ago

nice and clean others can use it

Collectives™ on Stack Overflow

checkbox group get value of checked checkbox jquery

2 Answers 2

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related