Question

我有一个复选框如下：

            <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的整个空间控制复选框已选中且未选中。单击“选择所有参与者”时，我希望选中左侧列表中的所有复选框，并选择要更改为“取消选择所有参与者”的文本。在点击后面我希望它回到原来的样子。

在签出stackoverflow之后，我找到了一些检查复选框但没有用它切换文本的东西：

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

我希望这也可以切换文字。

Answer 1

这就是你想要的。

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

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

希望这有帮助！

Answer 2

试试这个：

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

编辑＃2 ：请注意您已为您的复选框定义了两次class属性;尝试合并它们或者将chk1设置为id，然后你可以这样称呼它：$('#chk1')。您可能还想为保留文本的锚点添加id，以便将其与复选框区分开来;当然，相应地修改功能。

编辑＃3 ：以下是已清理的代码：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

请尝试以下操作。

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

jQuery切换复选框并切换锚文本

3 个答案: