Add attribute if checkbox is unchecked

Question

How do I add the title attribute value "not selected" if the checkbox is unchecked?

This is what I tried so far, https://jsfiddle.net/5qakegrz/2/

<input type=checkbox class="fnPress" checked>1
<input type=checkbox class="fnPress">1

<script>
$(function(){
    $('input.fnPress:checked').attr("title", "selected"); 
    $('input.fnPress').change(function(){
        if($(this).is(":checked")) {
            $(this).attr("title", "selected");
        } else {
            $(this).removeAttr("title");
        }
    }); 
});

</script>

change $(this).removeAttr("title"); to $(this).attr("title", "not selected"); — Som
– Som, Commented Sep 20, 2018 at 8:23

Anki · Accepted Answer · 2018-09-20 08:21:25Z

1

To achieve this first we can add title not selected on all checkboxes and then for selected one we can update it to selected. In change callback function we will add title selected if it is checked and if it is unchecked the title would be not selected. see below code.

$(function(){
    $('input.fnPress').attr("title", "not selected"); 
    $('input.fnPress:checked').attr("title", "selected"); 
    $('input.fnPress').change(function(){
        if($(this).is(":checked")) {
            $(this).attr("title", "selected");
        } else {
            $(this).attr("title", "not selected");
        }
    }); 
});

<input type=checkbox class="fnPress" checked>1
<input type=checkbox class="fnPress">1

answered Sep 20, 2018 at 8:21

Anki

4173 silver badges8 bronze badges

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

Comments

baj9032 · Accepted Answer · 2018-09-20 09:01:01Z

1

$(function() {
  var // cache selector so we don't keep scanning the DOM over and over
    $inputs = $('input.fnPress'),
    // use a function to update the "title" attribute
    update_title = function(elements) {
      // iterate over the elements given as argument
      elements.each(function() {
        // cache the element so we save one DOM scanning
        var $this = $(this);

        // change the title attribute depending on the checkbox's state
        $this.attr(
          'title',
          $this.prop('checked') ? 'selected' : 'not selected'
        );
      });
    };

  // call the function on change
  $inputs.on('change', function() {
    update_title($inputs);
  });

  // start by setting the title attributes
  update_title($inputs);
});

edited Sep 20, 2018 at 9:01

baj9032

2,5923 gold badges25 silver badges41 bronze badges

answered Sep 20, 2018 at 8:21

Stefan Gabos

1,48115 silver badges17 bronze badges

1 Comment

samuel Over a year ago

Thank you for with detail comments. very helpful :)

Collectives™ on Stack Overflow

Add attribute if checkbox is unchecked

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related