jQuery切换复选框，还切换锚文本

jQuery toggle checkbox and also toggle anchor text

本文关键字：文本 复选框 jQuery      更新时间：2023-09-26

我有一个复选框，如下所示：

            <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>

我希望div的整个空间sel actors控制复选框是否选中。当单击Select all Actors时，我希望选中左侧列上的所有复选框，并将文本Select all Actor更改为Deselect all Actors。点击返回时，我希望它回到原来的样子。

在检查了stackoverflow之后，我发现了一些选中复选框但不切换文本的东西：

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

我希望这也能切换文本。

这是您想要的。

$(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);
        }
    });                 
});

基本上，添加一个变量来存储潜在的文本字符串，然后在更新复选框后，相应地设置字符串。

希望这能有所帮助！

试试这个：

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

编辑：要将其纳入您的功能，请执行以下操作：

$(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：请注意，您已经为复选框定义了两次class属性；尝试将它们合并，或者将chk1设置为id，然后您可以这样称呼它：$('#chk1')。您可能还想为持有文本的锚点添加一个id，以将其与复选框区分开来；当然，相应地修改函数。

编辑#3：这是清理后的代码：

$(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" />

尝试以下操作。

  <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>
相关文章：