jQuery toggle checkbox and also toggle anchor text

Question

I have a checkbox as follows:

            <div class="left-col">
            .......
            <div class="actors-top sel-actors">
            <p class="selall sel-actors"><a class="sel-actors" id=""seltext>Select all Actors</a></p>
            <input type="checkbox" name="" value="" class="chk1" class="sel-actors" />
            </div>
            .......
            </div>

I want the whole space of the div sel-actors control the checkbox checked and not checked. When Select all Actors is clicked I want all checkboxes on the left-col to be checked and the text Select all Actors to be changed into Deselect all Actors. On the click back i want it to go back to how it was.

After checking out stackoverflow i found something that checks the checkbox but doesnt toggle text with it:

$(document).ready(function() {
    $(".sel-actors").click(function() {
        var checkBoxes = $(".left-col input");
        checkBoxes.prop("checked", !checkBoxes.prop("checked"));
    });                 
});

I would like this to toggle text also.

Answer 1

Here is what you want.

$(document).ready(function() {
    var SEL_ACTORS_TEXT = {
        CHECKED: 'Deselect all Actors',
        UNCHECKED: 'Select all Actors'
    };

    $(".sel-actors").click(function() {
        var checkBoxes = $(".left-col input"),
            $this = $(this);
        checkBoxes.prop("checked", !checkBoxes.prop("checked"));
        if ($this.prop('checked')) {
            $this.text(SEL_ACTORS_TEXT.CHECKED);
        } else {
            $this.text(SEL_ACTORS_TEXT.UNCHECKED);
        }
    });                 
});

Basically, add a variable to store the potential text strings and then after updating the checkboxes, set the string accordingly.

Hope this helps!

Answer 2

Try this:

$('.sel-actors').text('Deselect all Actors');

EDIT : to incorporate it into your function, do this:

$(document).ready(function() {
  $(".sel-actors").click(function() {
    var checkBoxes = $(".left-col input");
    checkBoxes.prop("checked", !checkBoxes.prop("checked"));
    if($('chk1').is(':checked'))
      $(this).text('Deselect all Actors');
    else
      $(this).text('Select all Actors');
  });                 
});

EDIT #2 : note that you have defined the class property twice for your checkbox; try either merging them or maybe setup chk1 as an id instead, then you'd call it like this: $('#chk1') . You may also want to add an id for your anchor holding the text to differentiate it from the checkbox; modify the function accordingly, of course.

EDIT #3 : Here is the cleaned up code:

 $(document).ready(function() { $("#chk1").click(function() { var checkBoxes = $(".left-col input"); checkBoxes.prop("checked", !checkBoxes.prop("checked")); if($(this).is(':checked')) $('#seltext').text('Deselect all Actors'); else $('#seltext').text('Select all Actors'); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a class="sel-actors" id="seltext">Select all Actors</a> <input type="checkbox" name="" value="" id="chk1" class="sel-actors" /> 

Answer 3

Try the following.

  <script type="text/javascript">
    $('.sel-actors').click(function (event) {
        if (this.checked) {
            $('.chk1').each(function () {
                $('.sel-actors').val("De-select all Actors");
                this.checked = true;
            });
        } else {
            $('.chk1').each(function () {
                $('.sel-actors').val("Select all Actors");
                this.checked = false;
            });
        }
    });
    </script>