How change the css with the checkbox with different names?

Question

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');
        }
    });

Add a class to each and refer to it instead of looking for the name — user2399035
– user2399035, Commented Oct 11, 2017 at 6:50

PraveenKumar · Accepted Answer · 2017-10-11 06:56:24Z

1

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');
    }
});

answered Oct 11, 2017 at 6:56

PraveenKumar

1,86113 silver badges19 bronze badges

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

Comments

Rohit Agrawal · Accepted Answer · 2017-10-11 06:54:49Z

1

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');
        }
});

answered Oct 11, 2017 at 6:54

Rohit Agrawal

1,52111 silver badges21 bronze badges

Comments

Suren Srapyan · Accepted Answer · 2017-10-11 06:58:08Z

1

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');

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

edited Oct 11, 2017 at 6:58

answered Oct 11, 2017 at 6:50

Suren Srapyan

68.9k14 gold badges128 silver badges119 bronze badges

3 Comments

Tony Over a year ago

What if I want only the inputs with a certain name do something? How will it be possible?

Suren Srapyan Over a year ago

You need to use separator selector like $('input[name="1"], input[name="2"]'). This returns only elements with given selectors

Alaksandar Jesus Gene Over a year ago

Make it as a class. For example <input type="radio" name="checkit" class="checkit"> and you can refer in jquery as $('input.checkit)

Saw Zin Min Tun · Accepted Answer · 2017-10-11 07:05:42Z

0

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

answered Oct 11, 2017 at 7:05

Saw Zin Min Tun

6423 silver badges9 bronze badges

Comments

Varun Popli · Accepted Answer · 2017-10-11 10:24:07Z

0

Use

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

instead of

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

answered Oct 11, 2017 at 10:24

Varun Popli

11 silver badge1 bronze badge

Collectives™ on Stack Overflow

How change the css with the checkbox with different names?

5 Answers 5

Comments

Comments

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related