Targeting only one toggle (the next div after select) in jquery not all of them
This works except it shows all of the toggle when I only want it to show just the one underneath it.
Heres the html
$( ".toggle" ).hide();
$(function () {
$(".binary").change(function() {
if ($(this).val() == "0"){
$( ".toggle" ).hide();
} else {
$( ".toggle" ).show();
}
$("#pane").customScrollbar("resize", true);
});
});
Heres the html
<div class="option checkbox">
<label class="field_wrap">
<div class="label">1</div>
<div class="field">
<select class="binary" name="option_1">
<option value="0"></option>
<option value="1"></option>
</select>
</div>
</label>
</div>
<div class="toggle">
toggle 1
</div>
<div class="option checkbox">
<label class="field_wrap">
<div class="label">1</div>
<div class="field">
<select class="binary" name="option_1">
<option value="0"></option>
<option value="1"></option>
</select>
</div>
</label>
</div>
<div class="toggle">
toggle 2
</div>
You should try :first selector
$(function () {
$(".binary:first").change(function() {
if($(this).val() == "0"){
$(this).next(".toggle").hide();
} else {
$(this).next(".toggle").show();
}
$("#pane").customScrollbar("resize", true);
});
});
try following
$( ".toggle" ).hide();
$(function () {
$(".binary").change(function() {
if ($(this).val() == "0"){
$(this).parent().parent().parent().next().hide();
} else {
$(this).parent().parent().parent().next().show();
}
$("#pane").customScrollbar("resize", true);
});
});
This is similar to #Ganesh's answer but has greater specificity, which might be important in your scenario.
$(".toggle").hide();
$(function () {
$(".binary").change(function () {
if ($(this).val() == "0") {
console.log($(this).closest('div.option.checkbox').length);
$(this).closest('div.option.checkbox').next(".toggle").hide();
} else {
$(this).closest('div.option.checkbox').next(".toggle").show();
}
$("#pane").customScrollbar("resize", true);
});
});
You can use jQuery's .next() method.
$(function () {
$(".binary").change(function() {
if($(this).val() == 0){
$(this).parents("div.checkbox").next('.toggle').hide();
} else {
$(this).parents("div.checkbox").next('.toggle').show();
}
$("#pane").customScrollbar("resize", true);
});
});
Here is a Demo Fiddle.
Related
I'm trying to automatically hide divs in JavaScript using the below code, such that they can only be displayed/hidden upon clicking a select option:
//hiding the divs
$(document).ready(function(){
function hide(){
$(".atm").hide();
$(".bank").hide();
}
hide();
});
For reasons unknown to me, the code does not work(the divs are still not hidden). Below is the rest of the code (it works properly, only the code above isn't hidding divs)
//here's my html code for div
<div class="atm">ATM</div>
<div class="bank">Bank</div>
//here's my select code
<select name="type" id="document-type" onchange="showOptions(this)">
<option value="ATM">ATM</option>
<option value="Bank">Bank</option>
</select>
//and here's my javascript code for displaying the hidden divs
function showOptions(s) {
var val = s.options[s.selectedIndex].value;
if(val === "ATM"){
hide();
$(".atm").slideDown(400);
}else
if(val === "Bank"){
hide();
$(".bank").slideDown(400);
}
};
Anywhere I'm going/doing wrong?
Bind a change event to your select
$(document).ready(function(){
function hide(){
$(".atm").toggle();
$(".bank").toggle();
}
$('select').on('change',hide).trigger('change');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="atm">atm</div>
<div class="bank">bank</div>
<select>
<option>select</option>
<option>select</option>
</select>
Check this answer here
$(document).ready(function(){
$(".atm").hide();
$(".bank").hide();
$('select').on('change',function(){
if($('select').val()=='atm'){
$('.atm').show();
$('.bank').hide();
}
else if($('select').val()=='bank'){
$('.bank').show();
$('.atm').hide();
}
});
});
<html><head><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script></head>
<body>
<select><option value="atm">ATM</option><option value="bank">Bank</option></select>
<div class="atm">ATM</div>
<div class="bank">BANK</div>
$(document).ready(function(){
$(".atm").hide();
$(".bank").hide();
$('select').change(function(){
$(".atm").toggle();
$(".bank").toggle();
}).
});
Try this. This will hide the classess on page load and then after changing the select box it will show. toggle() function is used to hide and show the elements.
Update to unresolved question -
Copy the following code into a text.html file and run it a browser and let us know the result:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
function hide()
{
$('.atm').hide();
$('.bank').hide();
}
//and here's my javascript code for displaying the hidden divs
function showOptions(s) {
var val = s.options[s.selectedIndex].value;
if(val === "ATM"){
hide();
$(".atm").slideDown(400);
}else
if(val === "Bank"){
hide();
$(".bank").slideDown(400);
}
};
</script>
</head>
<body>
//here's my html code for div
<div class="atm">ATM</div>
<div class="bank">Bank</div>
//here's my select code
<select name="type" id="document-type" onchange="showOptions(this)">
<option value="ATM">ATM</option>
<option value="Bank">Bank</option>
</select>
</body>
</html>
Please see update at end according to question's update:
The js looks fine to me it works in example below - may be your html:
(Do your div's in html have class='atm' & class='bank' ?)
$(document).ready(function ()
{
function hide ()
{
$(".atm") .hide();
$(".bank").hide();
$('.btnHideShow').text('Show');
}
function show ()
{
$(".atm") .show();
$(".bank").show();
$('.btnHideShow').text('Hide');
}
$('.btnHideShow').click(function ()
{
if($('.atm').is(':hidden'))
{
show();
}
else
{
hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='atm'>Div ATM</div>
<div class='bank'>Div Bank</div>
<button class="btnHideShow">Hide</button>
Using select:
$(document).ready(function ()
{
function hide ()
{
$(".atm") .hide();
$(".bank").hide();
$('.btnHideShow').text('Show');
}
function show ()
{
$(".atm") .show();
$(".bank").show();
$('.btnHideShow').text('Hide');
}
$('.sel').change(function ()
{
//console.log($(this).val());
var val = $(this).val();
if(val === 'None')
{
hide();
}
else
if(val === 'Bank-ATM')
{
show();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='atm'>Div ATM</div>
<div class='bank'>Div Bank</div>
<select class="sel">
<option>Bank-ATM</option>
<option>None</option>
</select>
In your update to the question you left out your hide function:
(are you including jquery lib?)
function hide()
{
$('.atm').hide();
$('.bank').hide();
}
//and here's my javascript code for displaying the hidden divs
function showOptions(s) {
var val = s.options[s.selectedIndex].value;
if(val === "ATM"){
hide();
$(".atm").slideDown(400);
}else
if(val === "Bank"){
hide();
$(".bank").slideDown(400);
}
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
//here's my html code for div
<div class="atm">ATM</div>
<div class="bank">Bank</div>
//here's my select code
<select name="type" id="document-type" onchange="showOptions(this)">
<option value="ATM">ATM</option>
<option value="Bank">Bank</option>
</select>
I have a dropdown menu with checkboxes inside. I want to close the dropdown when the users click outside.
My code is:
<form>
<div class="multiselect">
<div class="selectBox" onclick="showCheckboxes()">
<select>
</select>
</div>
<div class="checkboxes" id="checkboxes">
#{
if (ViewBag.DataActiveEmployee == null || ((IEnumerable<MvcApplication1.Models.ActiveUsersList>)ViewBag.DataActiveEmployee).Count() == 0)
{
//#:<h3>No records were processed.</h3>
}
else
{
foreach (var usr in ViewBag.DataActiveEmployee)
{
<label id="userName">#usr.EmployeeName</label>
<input class="checked" type="checkbox" name="search_emp" id="search_emp" value=#usr.EmployeeName>
#:
}
}
}
</div>
</div>
JS
<script>
var expanded = false;
checkboxes.style.display = "none";
function showCheckboxes() {
var checkboxes = document.getElementById("checkboxes");
if (!expanded) {
checkboxes.style.display = "block";
expanded = true;
} else {
checkboxes.style.display = "none";
expanded = false;
}
}
$('multiselect').click(function () {
$("#checkboxes").hide();
});
The problem is inside the second function of JavaScript because when I press outside, nothing is happening.
Please help.
Try using the event.target to handle click events:
UPDATE
$(document).on('click', '.multiselect .selectBox', function(e) {
e.stopImmediatePropagation();
$('#checkboxes').show();
});
$('body').on('click', function(e) {
if (e.target.id != 'checkboxes' && $(e.target).closest('#checkboxes').length == 0) {
$('#checkboxes').hide();
}
});
#checkboxes,
.multiselect {
padding:15px;
border:1px solid #d8d8d8;
}
.selectBox { display: inline; }
#checkboxes { display:none }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="multiselect">
<div class="selectBox">
<select>
</select>
</div>
<div class="checkboxes" id="checkboxes">
<label id="userName">Employee 1</label>
<input class="checked" type="checkbox" name="search_emp" id="emp_1" value="val_1">
<label id="userName">Employee 1</label>
<input class="checked" type="checkbox" name="search_emp" id="emp_1" value="val_1">
</div>
</div>
Check if the target click on dom is the dropdown itself or not as
$(document).on("click", function(event){
var $trigger = $(".checkboxes");
if($trigger !== event.target && !$trigger.has(event.target).length){
$(".checkboxes").hide();
}
});
It should work.
Do you have any idea to rewrite the jQuery code to choose between to two selection options (Yes and No)? .
I tried this in jQuery :
$(document).ready(function() {
$("#send_to_one").hide();
$("input:radio[name='decision']").change(function(){
if(this.checked){
if(this.value =='one'){
$("#send_to_one").show() && $("#send_to_two").hide()
}else if(this.value =='two'){
$("#send_to_two").show()
}else{
$("#send_to_one").hide();
}
}
});
});
CSS :
#send_to_one{
display:none;
}
#send_to_two{
display:none;
}
The "Yes" button send_to_one works well, if I select it, the correct informations are shown and the informations from send_to_two are hidden. If I select the "No" button the informations from send_to_two are shown, but the send_to_one informations are still shown. I tried to use the command from the first if statement, but this doesn't work. Do you have any ideas?
Thanks for your help, but always i add the recommended command the send_to_twoaction doesn't work.
This is my _form. Did i maybe make a mistake there?
<h2>Are you insured?</h2>
<div id="send_to">
<input type="radio" id="send_poll" name="decision" value="one" checked="checked" />Yes<br/>
<input type="radio" id="send_poll" name="decision" value="two" />No<br/>
<div id="send_to_one">
<div class="table-row-2">
<div align="center">
<div class="field">
<div class="table"><%= ........ %></div><div class="table"></div><div class="table"></div>
</div>
</div>
</div>
<div id="send_to_two">
<div class="table-row-2">
<div align="center">
<div class="field">
<div class="table">
<div class="table"><%= ..... %></div><div class="table"></div><div class="table"></div></div>
</div>
</div>
</div>
</div>
</div>
Thanks for your Help!
You're just missing the hide statement in the second condition, your code should be :
if(this.value =='one')
{
$("#send_to_one").show();
$("#send_to_two").hide();
}else if(this.value =='two'){
$("#send_to_two").show();
$("#send_to_one").hide(); //<<---------- Adding this line to hide 'send_to_one'
}else{
$("#send_to_one").hide();
}
Because you're using jquery better if you use jquery object $(thhis):
$(document).ready(function() {
$("#send_to_one").hide();
$("input:radio[name='decision']").change(function()
{
if( $(this).is(':checked') )
{
if($(this).val()==='one')
{
$("#send_to_one").show();
$("#send_to_two").hide();
}
else if($(this).val()==='two')
{
$("#send_to_two").show();
$("#send_to_one").hide();
}
else
{
$("#send_to_one").hide();
}
}
});
});
Hope this helps.
$(document).ready(function() {
$("#send_to_one").hide();
$("input:radio[name='decision']").change(function(){
if($(this).is(':checked'))
{
if($(this).val()==='one')
{
$("#send_to_one").show();
$("#send_to_two").hide();
}
else if($(this).val()==='two')
{
$("#send_to_two").show();
$("#send_to_one").hide();
}
else
{
$("#send_to_one").hide();
}
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name='decision' value='one'/>Yes
<input type="radio" name='decision' value='two' checked/>No
<br/>
<div id="send_to_one">
send_to_one div
</div>
<div id="send_to_two">
send_to_two div
</div>
if(this.checked){
if(this.value =='one'){
$("#send_to_one").show() && $("#send_to_two").hide()
}else if(this.value =='two'){
$("#send_to_two").show();
$("#send_to_one").hide()
}else{
$("#send_to_one").hide();
}
}
Try this And check your code for missing ;
$(document).ready(function() {
$("#send_to_one").hide();
$("input:radio[name='decision']").change(function(){
if(this.checked){
if(this.value =='one'){
$("#send_to_one").show();
$("#send_to_two").hide();
}else if(this.value =='two'){
$("#send_to_two").show();
$("#send_to_one").hide();
}
}
});
});
Hope this will help you:
$(document).ready(function() {
$("#send_to_one").hide();
$("#send_to_two").hide();
$("input:radio[name='decision']").click(function(){
if($(this).val() =='one'){
$("#send_to_one").show();
$("#send_to_two").hide();
}else if($(this).val() =='two'){
$("#send_to_one").hide();
$("#send_to_two").show();
}else{
$("#send_to_one").hide();
$("#send_to_two").hide();
}
});
});
I want to append div on click add more and remove that div according to my code
$(document).ready(function() {
$(".add-skill-row span").click(function() {
$(".add-skils-form:first").clone().appendTo("#appendbox");
});
$('#appendbox').on('click', '.delete-row', function() {
$(this).closest('.add-skils-form').remove();
});
});
this is my code it works perfect but i want to not delete first div and remove delete button my html code is
<div id="appendbox">
<div class="add-skils-form">
<div class="skill-a">
<input type="text" class="inputtextbox" value="" name="" placeholder="Enter Your Key Skills" />
</div>
<div class="skill-b">
<select id="key-skills-select" class="defualt-select default-size">
<option value="3">Advanced</option>
<option value="2">Intermediate</option>
<option value="1" selected>Beginner</option>
</select>
<i class="fa fa-trash" aria-hidden="true"></i>
</div>
</div>
</div>
how could i do please suggest me
Try with this.
$(document).ready(function() {
deleteRow();
$(".add-skill-row span").click(function() {
$(".add-skils-form:first").clone().appendTo("#appendbox");
$('.delete-row').show();
});
$('#appendbox').on('click', '.delete-row', function() {
$(this).closest('.add-skils-form').remove();
deleteRow();
});
function deleteRow(){
if($('.add-skils-form').length == 1){
$('.delete-row').first().hide();
}
}
});
Another Solution
Check here https://fiddle.jshell.net/o2f0kskf/1/
$(document).ready(function() {
$(".add-skill-row span").click(function() {
$(".add-skils-form:first").clone().find("input[type='text']").val("").end().appendTo("#appendbox");
});
$('#appendbox').on('click', '.delete-row', function() {
$(this).closest(".add-skils-form").not(":first-child").remove();
});
});
I have a view with checkboxes, generated dynamically, and a button for chech/unchek all the checkboxes. I try the code bellow but, the checkboxes are not checked ob button click event. Please help.
Thank you.
View with checkboxes:
<button id="selectinvert" name="selectinvert" class="clear-selection ui-btn-hidden" aria-disabled="false" > Select / Deselect All</button>
#for (int i = 0; i < #Model.workDaysList.Count; i++)
{
<div class="framed">
<div data-role="collapsible" data-collapsed="true" class="ui-btn-inner ui-corner-top ui-corner-bottom">
<h3>
<div class="ui-checkbox" id="checkbox">
<input type="checkbox" id="#Model.workDaysList[i][0]" />
<span class="ui-btn-text">
<label for="#Model.workDaysList[i][0]" data-theme="c">
#Model.workDaysList[i][1].Substring(6, 2)/#Model.workDaysList[i][1].Substring(4, 2)/#Model.workDaysList[i][1].Substring(0, 4)
</label>
</span>
</div>
</h3>
#Model.detailDaysList[i][0] / #Model.detailDaysList[i][1]
<br />
#Model.detailDaysList[i][2] / #Model.detailDaysList[i][3]
<br />
#Model.detailDaysList[i][4] h
</div>
</div>
</div>
}
Jquery code:
<script type="text/javascript">
$(document).ready(function () {
$("#selectinvert").click(function () {
$("INPUT[type='checkbox']").each(function () {
if (this.checked == false) {
this.checked = true;
} else {
this.checked = false;
}
});
});
});
</script>
Try This:
<script lang='javascript'>
$(document).ready(function(){
$('#selectinvert').click(function(){
$("input[type='checkbox']").each(function (){
if($(this).is(':checked')){
$(this).prop('checked', false);
}else{
$(this).prop('checked', true);
}
});
})
});
</script>
there are closing }) missing..
btw: the toggle can written like this:
this.checked = !this.checked
Try to start with a basic HTML code and build upon that! Your model code might be braking your HTML. You can find the working prototype here!
<button id="selectinvert" name="selectinvert" class="clear-selection ui-btn-hidden" aria-disabled="false" > Select / Deselect All</button>
<div class="framed">
<div class="ui-checkbox" id="checkbox">
<input type="checkbox" id="#Model.workDaysList[i][0]" />
<span class="ui-btn-text">First</span>
</div>
<div class="ui-checkbox" id="checkbox">
<input type="checkbox" id="#Model.workDaysList[i][0]" />
<span class="ui-btn-text">Second</span>
</div>
</div>
$("#selectinvert").click(function() {
$("INPUT[type='checkbox']").each(function() {
if (this.checked == false) {
this.checked = true;
} else {
this.checked = false;
}
});
});
As others suggest, you were missing closing brackets.
You could also shorten your code a bit:
$("#selectinvert").click(function() {
$("input[type='checkbox']").each(function() {
this.checked = !this.checked;
});
});
Also note that your problem has nothing to do with ASP.NET or jQuery UI.
try
$("#selectinvert").click(function () {
$("INPUT[type='checkbox']").each(function () {
if (!$(this).is(":checked")) {
$(this).attr('checked','checked');
} else {
$(this).removeAttr('checked','checked');
}
})
});
I think the code you have written will only only work when all the checkboxes are either checked or unchecked..
What happens when some of them are checked.. Your code will just toggle those..
Your logic should be dependent on the button and not the checkboxes..
$(document).ready(function() {
var isChecked = false;
$("#selectinvert").click(function() {
var $checkboxes = $("INPUT[type='checkbox']") ;
if(isChecked){
isChecked = false;
}
else{
isChecked = true;
}
$checkboxes.prop('checked' , isChecked);
});
});