Question

这就是我使用的。

$(document).ready(function() {
  var a = $("#companyname");
  var b = $(".companyname");
  b.hide();
  a.change(function() {
    if (a.is(':checked')) {
      b.show();
    } else {
      b.hide();
    }
  });
});

PHP

if ($result->num_rows > 0) { 
  // output data of each row 
  while($row = $result->fetch_assoc()) {
     echo "<div class='hide'><h4 class='period'>". $row["PeriodFrom"]." to ".$row["PeriodTo"]."</h4><h4 class='companyname'>". $row["CompanyName"]. "</h4><h4 class='city'>".$row["City"].", " .$row["Country"]."<h4 class'jobt'>" . $row["JobTitle"] . "<p class='info'>".$row["Responsibilities"]."</p>" . "</div>"; } 
} else {
     echo "0 results"; 
}

但我想知道是否有选项可以制作多功能？而不是为每个复选框编写相同的代码。

＆＃13;

<form>
  <h1>Filter</h1> 
  <input id="checkperiod" type="checkbox" name="period"> Period 
  <input id="companyname" type="checkbox" name="companyname">Company Name 
  <input id="city" type="checkbox" name="city"> City and Country
  <input id="jobt" type="checkbox" name="jobtitle">Job
  Title 
  <input if="info" type="checkbox" name="info"> Info and Responsibilities 
</form>

＆＃13;

Answer 1

为所有复选框指定一个特定的类，并使用选择器将事件绑定到所有复选框。根据我从您的代码中理解，显示/隐藏的相关元素具有与相关复选框相同的类名。此外，由于它只是一个简单的显示/隐藏案例，您可以使用toggle()函数。

修改：$('.' + this.name)所做的是我们正在创建一个类选择器，就像您在var b = $(".companyname");中所做的那样。由于需要隐藏的元素是类名与复选框名称相同的元素，我们将.与this.name连接起来（this.name将获得复选框的名称）。

我在下面添加一个例子。我在HTML中做了一些推文。

$('#filterForm input:checkbox').change(function() {
  if($('#filterForm input:checkbox:checked').length > 0){
    $('#filterDiv').removeClass('hide');
  } else {
    $('#filterDiv').addClass('hide');
  }
  if(this.checked){
    $('.' + this.name).removeClass('hide');
  } else {
    $('.' + this.name).addClass('hide');
  }
  
});

.hide{display:none}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="filterForm">
  <h1>Filter</h1> 
  <input id="checkperiod" type="checkbox" name="period"> Period 
  <input id="companyname" type="checkbox" name="companyname">Company Name 
  <input id="city" type="checkbox" name="city"> City and Country
  <input id="jobt" type="checkbox" name="jobtitle">Job
  Title 
  <input if="info" type="checkbox" name="info"> Info and Responsibilities 
</form>

<div id="filterDiv" class="hide">
  <h4 class='period hide'>PeriodFrom to PeriodTo</h4>
  <h4 class='companyname hide'>CompanyName</h4>
  <h4 class='city hide'>
    City, Country.
  </h4>
  <h4 class='jobtitle hide'>JobTitle</h4>
  <p class='info hide'>Responsibilities</p>
</div>

Answer 2

这应该回答你的问题，但现在我的问题是，你怎么看待显示你的复选框，如果当你取消选中它时它被隐藏然后无法点击再次显示？

$('.options').change(function() { 
  $(this).toggle(this.checked);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"> </script>

<form> <h1>Filter</h1> 
<input id="checkperiod" class="options" type="checkbox" name="period"> Period
<input id="companyname"class="options"  type="checkbox" name="companyname">Company Name 
<input id="city" class="options"  type="checkbox" name="city"> City and Country 
<input id ="jobt"class="options"  type="checkbox" name="jobtitle">Job Title 
<input id="info" class="options"  type="checkbox" name="info"> Info and Responsibilities 
</form>

jQuery多功能复选框

2 个答案: