使用複選框隱藏並顯示元素

美好的一天！要使用複選框屬性（「checked」，false/true）隱藏/顯示元素。所以我創建了這個例子來解釋我想要的。 https://jsfiddle.net/9LzLm9hx/4/ 嘗試選中並取消選中類別複選框，然後按下按鈕hide/show。當這個複選框是false它隱藏，但我不能讓他們true之後。謝謝。使用複選框隱藏並顯示元素

來源

2015-12-02 max

檢查更新的小提琴[這裏]（https://jsfiddle.net/9LzLm9hx/6/） – Akshay

不工作一樣previuos之一 – Dilip

你可以在你的元素使用相同的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()

來源

2015-12-02 12:23:47

.attr("checked", false)是對元素分配假的，並將其返回，計算結果爲真（存在），你要比較的屬性，爲此，您可以：

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

來源

2015-12-02 12:14:42 Kriggs

如果你想檢查是否選中複選框或不使用此代碼$('#category').is(':checked')，該代碼$('#category').attr("checked", false)集複選框ATTR爲false，但返回真，所以你當前的代碼只是一直不選中#category複選框和隱藏.category元素

來源

2015-12-02 12:18:26

使用複選框隱藏並顯示元素

回答

相關問題