CODEWITHSUNDEEP
javascriptjqueryhtmlcsscheckbox
GRowing
GRowing

Reputation: 4717

jQuery selecting checkbox by class name in TWO separate divs

I have created a fiddle of what I am trying to do here: http://jsfiddle.net/393Yk/

I have two columns and in each column I basically have a replica of a nested unordered list with a lot of checkboxes.

As I check and uncheck the checkbox on the left side column the corresponding check-box in the right column is supposed to check and uncheck as well.

The idea is actually to have elements on the right side be hidden until they are selected on the left side so the right side should only show what is selected (not all elements).

I am taking this one step at a time and I have a problem getting the right hand side checkbox to check or uncheck AFTER it has been done once.

So the FIRST time it works,, but after the first time,, it doesn't.

The code addressing the checking and unchecking is here:

$('.mod-left .wf-check').attr('checked', false).change(function(){

    var sel = $(this).data("val");

    if( $(this).is(":checked") ){

        console.log("Checked " + sel);

        $('.mod-right input.wf-check-' + sel + '[type=checkbox]').attr('checked', true);

    } else {

        console.log("Unchecked " + sel);

        $('.mod-right input.wf-check-' + sel + '[type=checkbox]').attr('checked', false);

    }
});

Can someone help me with selecting checkboxes and manipulating them by class name?

Thank you.

Upvotes: 0

Views: 423

Answers (2)

AmmarCSE
AmmarCSE

Reputation: 30597

Change where ever you have

$('.mod-right input.wf-check-' + sel + '[type=checkbox]').attr('checked',...);

to

$('.mod-right input.wf-check-' + sel + '[type=checkbox]').prop('checked',...);

Fiddle

Upvotes: 1

manuBriot
manuBriot

Reputation: 2715

The following seems to work (i.e. not using the jquery attr() function).

if( $(this).is(":checked") ){
    $('.mod-right input.wf-check-' + sel + '[type=checkbox]')[0].checked = true;
} else {
    $('.mod-right input.wf-check-' + sel + '[type=checkbox]')[0].checked = false;
}

Of course, it would be nicer to code as:

$('.mod-right input.wf-check-' + sel + '[type=checkbox]')[0].checked = $(this).is(':checked');

Upvotes: 1

Related Questions