Question

美好的一天！想要使用复选框属性隐藏/显示元素（＆＃34;选中＆＃34;，false / true）。所以我创建了这个例子来解释我想要的东西。 https://jsfiddle.net/9LzLm9hx/4/ 尝试选中并取消选中类别复选框，然后按下按钮hide/show。当此复选框隐藏false时，我无法在此之后创建true。感谢。

Answer 1

您可以在元素中使用相同的id和class名称，并将其总结为以下内容：

$('.js-ok').on('click', function() {
  //iterate through checkboxes
  $(".custom-checkbox :checkbox").each(function() {
    //toggle specific element according to the checkbox status
    $("." + $(this).attr("id")).toggle($(this).prop("checked"));
  })
});

#common {
  margin-left: 20px;
}
#common + label + span {
  font-size: 21px;
  color: red;
}
.col-xs-3 {
  margin-top: 29px;
  border: 1px solid black;
}
.category {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class="modal-body row col-xs-12">
  <div class="col-xs-8 common-inputs">
    <form role="form" class="left-checkbox-container col-xs-12">
      <div class="custom-checkbox checkbox-title">
        <input type="checkbox" id="common" />
        <label for="common"></label> <span>Common</span>
      </div>
    </form>
    <form role="form" class="left-checkbox-container col-xs-5">
      <div class="custom-checkbox">
        <input type="checkbox" id="post-id" />
        <label for="post-id"></label> <span>ID</span>
      </div>
      <div class="custom-checkbox">
        <input type="checkbox" id="active" name="check" />
        <label for="activation"></label> <span>Active</span>
      </div>
      <div class="custom-checkbox">
        <input type="checkbox" id="info" name="check" />
        <label for="information"></label> <span>info</span>
      </div>
    </form>
    <form role="form" class="left-checkbox-container col-xs-5">
      <div class="custom-checkbox">
        <input type="checkbox" id="onOff" />
        <label for="on-off"></label> <span>on/off</span>
      </div>
      <div class="custom-checkbox">
        <input type="checkbox" id="socialNet" name="check" />
        <label for="social-network"></label> <span>social</span>
      </div>
      <div class="custom-checkbox">
        <input type="checkbox" id="category" name="check" />
        <label for="category"></label> <span>category</span>
      </div>
    </form>
    <button class='btn btn-primary js-ok'>hide/show category</button>

  </div>

  <div class="container">
    <div class="row">
      <div class="col-xs-12">
        <div class='col-xs-3 post-id'>id</div>
        <div class='col-xs-3 active'>active</div>
        <div class='col-xs-3 info'>info</div>
        <div class='col-xs-3 onOff'>on/off</div>
        <div class='col-xs-3 socialNet'>social</div>
        <div class='col-xs-3 category'>category</div>
      </div>
    </div>
  </div>

<强>参考

.toggle()

.attr()

Answer 2

.attr("checked", false)正在为元素赋值false，并返回它，其值为true（存在），您要比较属性，为此您可以：

$('#category').attr("checked") === false。

Answer 3

如果您想检查是否选中了复选框，请使用此代码$('#category').is(':checked')，此代码$('#category').attr("checked", false)将复选框attr设置为false，但返回 true ，以便您当前代码只需取消选中 #category 复选框并隐藏 .category 元素

使用复选框隐藏和显示元素

3 个答案: