score:2
Accepted answer
Take a look at this solution
$("button").on("click", function() {
$("input[type=checkbox]:not(:checked)").parent().hide();
})
#block{display:none;background:#eef;padding:10px;text-align:center;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div1">
<input type="checkbox" id="cbxShowHide"/><label for="cbxShowHide">Show/Hide</label>
</div>
<div class="div2">
<input type="checkbox" id="cbxShowHide2"/><label for="cbxShowHide2">Show/Hide</label>
</div>
<button>
Hide Checkboxes
</button>
score:0
All you need to do is have both items be classes, .div
and .cbxShowHide
, then do:
$('.cbxShowHide').change(function(){
$('.div').show(1000);
if(this.checked)
$('.div').not($(this).parent()).hide(1000);
});
Which will hide all the clicked items but the element you clicked on. And show the elements when you un-check.
score:1
Try to use :
if ( $(this).is(':checked') ){
$('.div1').show(1000);
$('.div2').hide(1000);
}
Note : $('.div1')
instead of $('#div1')
because you're using classes no ids.
hope this helps.
$('#cbxShowHide').click(function(){
if ( $(this).is(':checked') ){
$('.div1').show();
$('.div2').hide();
}else{
$('.div2').show();
}
});
$('#cbxShowHide2').click(function(){
if ( $(this).is(':checked') ){
$('.div2').show();
$('.div1').hide();
}else{
$('.div1').show();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div1">
<input type="checkbox" id="cbxShowHide"/><label for="cbxShowHide">Show/Hide</label>
<br>
div1 content
<br>
</div>
<hr/>
<div class="div2">
<input type="checkbox" id="cbxShowHide2"/><label for="cbxShowHide2">Show/Hide</label>
<br>
div2 content
<br>
</div>
Related Query
- Hide and show select option based on select option
- Javascript Hide Input Field based on Select change TEXT not VALUE
- Hide show markers based on dropdown select value google map
- Hide show text fields based on multiple select menu
- Hide/show checkboxes based on user input in text field
- Show and Hide mulitple input boxes from select input
- How to Hide or show the class based on the input text field
- Conditionally show and hide select input options that are generated from a database?
- Why the drop downs are not getting hide and show based on value selected from the select box in following case?
- How to hide or show an input with two select options using jquery
- Javascript jQuery Hide Form Items Based on Select Item
- Show more inputs based on select in PHP Foreach Loop
- Is populating a model based on user input changing a good use case for Knockout?
- Show or Hide form based on radio yes or no selection
- How to hide the tabs for a web application user based on his role
- Show and hide dynamically created table rows from a SELECT change
- JQuery: Want to Select Only 3 Checkboxes at a time and I want them to also Enable/Disable a input box
- Show div's based on a select option?
- how to hide and show select options for another select option bar
- Hide select option value so user can not view it
- Pushing data into a select based on the input of another select
- select box show another based on what selected
- Trying to hide button based on user email
- Show input based on selecting option
- ASP.NET Server Controls - Show Hide Textbox based on Dropdown selection
- Show / hide text input when checkbox is disabled
- loop through input and select elements and hide the previous td
- HTML DropDown List that shows data based on user input
- jQuery check input value and show warning based on value
- disable input field based on select box choice
- How do you default to show or hide using JQuery based on the value of a checkbox?
- jQuery: Duplicate X amount of divs based on user input
- Hide and show fields based on radio choice
- Show a number of text input form fields based on a number entered into another field
- jQuery show / hide elements by select field
- Jquery show div on hover then when user hovers out of div hide it help?
- jQuery show/hide multiple 'Other' input fields based on select drop down
- show and hide all sections with dropdown select options it ones in elementor
- How to change accept attribute of input type file based on select file type using javascript?
- How to check the checkboxes based on the input field value
- How to show hide div based on multiple dropdown
- How to hide and show secondary header based on hover icon in primary header
- How to hide select option based on option selected in the first selection
- Show hide Div based on toggle Switch
- Select country then automatically show country code on next input
- Simply send the user to URL based on his SELECT OPTION only when clicking SUBMIT
- get all td names associated with checked checkboxes and show in html input field
- Hide and show an item based on a toggled is-active class
- Validation input if using show hide jQuery
- jQuery Multiple start and end Dates based on User Input
More Query from same tag
- How do I write this jQuery more efficiently?
- How to add class based on which css class name is come in jquery
- How Do I remove the validation in jquery when either one of the fields are entered
- knockout is not working under document.ready
- How do I add class to the next li element and remove it form others?
- How to change code from working with .hover() to working with .click() and .hover()
- Get nested DIV's classes on click
- Jquery get value of text box next to a radio button
- add class to dynamically loaded menu
- FireFox Pop Up Blocker breaks javascript app when using .focus()
- Correct web-api controller action method definition for jsonp request
- When i click on a option how to make that option as selected in JQUery?
- How to apply Jquery to textbox, CssClass instead of ID in Jquery,Bootstrap
- Remove item from array if checkbox false
- Only run WayPoints if viewport width is greater than 1000px?
- Highlighting input in textarea
- Clar Ajax data after each OnClick and then append new data
- Javascript floating issue with addition
- I want an action that links me to the Object clicked in a list of Objects
- input range slider thumb js event
- jQuery after empty() an element then append() to it again, how to trigger click event on the appended element?
- Live append from a field
- Jquery Javascript checkbox selection/deselection
- jQuery - Click on optgroup selects all child options
- How to put the menu over the content?
- Datatable Legacy - Update Total of Pages existed
- How to change style of content a XSL file using C#/JQuery
- Making an ajax call from a file that's included in many pages
- jquery fadeIn effect with <tr>
- Issue of scope, referencing iterator "i" from one for loop in another for loop