Question

我正在尝试使用复选框进行文本搜索。例如，如果该人选中该复选框，则它将显示用户在搜索框中输入的单词/字母（该单词/字母将突出显示）。说我输入＆＃34;＆＃34;它会搜索所有＆＃34;＆＃34;在段落中，将突出显示所有＆＃34;＆＃34;。我已经得到了第一部分我不理解的是如何使复选框与文本搜索表单连接。因此，当用户选中复选框＆＃34;＆＃34;将显示或输入他们在搜索框中输入的任何单词/字母。

我在考虑使用if语句......

Answer 1

因此，如果您想与该复选框进行互动，您可以执行以下操作：

$(':checkbox').on('change', function() { 
    if ($(this).is(':checked')) { 
        // do your search thing 
    } else {
        // turn off your search thingy
    } 
});

Fiddle

Answer 2

您可以使用以下内容：

$(':checkbox').on('change', function() {
    if ($(this).is(':checked')) {
        $(".content").addClass("highlight");
    } else {
        $(".content").removeClass("highlight");
    }
});

在CSS中你需要：

.highlight {background: #99f;}

<强>段

$(function () {
  text = "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt repellat sint eligendi adipisci consequuntur perspiciatis voluptate sunt id, unde aspernatur dolor impedit iure quaerat possimus nihil laboriosam, neque, accusamus ad.";
  $(".content").text(text);
  $(':checkbox').on('change', function() {
    if ($(this).is(':checked')) {
      $(".content").addClass("highlight");
      $(".content").html(text.replace(/lo/gi, '<span>lo</span>'));
    } else {
      $(".content").removeClass("highlight");
    }
  });
});

.check + input {display: none;}
.check:checked + input {display: inline-block;}
.highlight span {background: #ccf;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="checkbox" class="check" />
<input type="text" placeholder="Type your terms..." class="term" />
<div class="content"></div>

也许就像上面那样。

使用Javascript

2 个答案: