CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Tony
Tony

Reputation: 193

How change the css with the checkbox with different names?

Currently, I have multiple checkbox inputs with different names(checkit, checktype, checklog) assigned to the inputs. What I want to do is to have each checkbox to change the color of the background when checked. However, I dont know how I can assign each one of the checkbox to do some tasks without duplicating the following code ?If possible some examples or tips will be great! I would love to hear from you .

Should I remove name="checkit" if I want to make all the inputs do the same thing? What if I want them to do some slightly different things? 

$('input[name="checkit"]').change(function () {
        if ($(this).prop('checked')) {
            $(this).parent().parent().addClass('alterBackground');
        } else {
            $(this).parent().parent().removeClass('alterBackground');
        }
    });

Upvotes: 0

Views: 96

Answers (5)

Varun Popli
Varun Popli

Reputation: 1

Use

$('input[type="checkbox"]')

instead of

$('input[name="checkit"]')

Upvotes: 0

Saw Zin Min Tun
Saw Zin Min Tun

Reputation: 642

$('input[type="checkbox"]').change(function () {
        if ($(this).prop('checked')) {
            $(this).parent().parent().addClass('alterBackground');
        } else {
            $(this).parent().parent().removeClass('alterBackground');
        }
    });

Upvotes: 0

Suren Srapyan
Suren Srapyan

Reputation: 68635

You can remove the name part from the selector and add selector for input[type='radio']. And if you want to add a bit different logic (I think you mean different classes), you can get the name of the current checked checkbox and use it to make your logic. Something like this

$('input[type="radio"]').change(function () {
     var checkboxName = $(this).prop('name');

     // if(checkboxName === .....)

});

Updated according to the comment

$('input[name="checkit"], input[name="checktype"], input[name="checklog"]').change(function () {
    var checkboxName = $(this).prop('name');

    // .............
});

Upvotes: 1

PraveenKumar
PraveenKumar

Reputation: 1861

Add the following by , or give some class name to it

$('input[name="checkit"], input[name="checktype"], input[name="checklog"]').change(function () {
    if ($(this).prop('checked')) {
        $(this).parent().parent().addClass('alterBackground');
    } else {
        $(this).parent().parent().removeClass('alterBackground');
    }
});

Upvotes: 1

Rohit Agrawal
Rohit Agrawal

Reputation: 1521

Don't use the name atrribute in jQuery and add a common class to each checkbox for a common functionality and access it with class selector in jQuery as shown below.

If you want to do something different with different checkboxes apart from this, then you can add more jQuery code for that specific input tag. It will not affect this code.

$('input.someClass').change(function () {
        if ($(this).prop('checked')) {
            $(this).parent().parent().addClass('alterBackground');
        } else {
            $(this).parent().parent().removeClass('alterBackground');
        }
});

Upvotes: 1

Related Questions