Can you please take a look at this demo and let me know why I am not able to ONLy remove the .check-wrap classes if exist? what is happening now the .unwrap() is even removing the .well
$("#un-mask").on("click", function() {
if ($("input:checkbox").parent().is('.check-wrap'))
$("input:checkbox").unwrap("<span class='check-wrap'></div>");
});
#import 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css';
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="well">
<input type="checkbox" />
<span class="check-wrap">
<input type="checkbox" />
</span>
<span class="check-wrap">
<input type="checkbox" />
</span>
</div>
</div>
<button class="btn btn-default" id="un-mask">Yes</button>
jQuery's .unwrap() method does not accept any arguments. It removes the parent of every matched element. Since your div.well is the parent of the first checkbox input, it is also removed.
One way to fix this would be to wrap the first checkbox input in a tag of some kind just like the others:
$('input:checkbox').unwrap();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="well">
<span class="check-wrap">
<input type="checkbox" />
</span>
<span class="check-wrap">
<input type="checkbox" />
</span>
<span class="check-wrap">
<input type="checkbox" />
</span>
</div>
</div>
<button class="btn btn-default" id="un-mask">Yes</button>
https://api.jquery.com/unwrap/
Related
This question already has answers here:
What does the "+" (plus sign) CSS selector mean?
(9 answers)
How to affect other elements when one element is hovered
(9 answers)
Closed 2 years ago.
The div is not changing properties when I hover on the <input> of that div. It doesn't seem to work.
I want to hover over myclass div inputs and make myclass2 div visible.
How to do that ?
.myclass #that:hover+.myclass2 #this {
left: 100px;
}
<div class="myclass" id="that">
<input class="logout1" type="button" value="All" id="myBtn"></input>
<input class="logout2" type="button" value="Section Wise" id="myBtn1"></input>
<span class="first"></span>
<span class="second"></span>
</div>
<div class="myclass2" id="this">
<input class="logout3" type="button" value="Section1" id="myBtn2"></input>
<input class="logout4" type="button" value="Section2" id="myBtn3"></input>
<input class="logout5" type="button" value="Section3" id="myBtn4"></input>
<input class="logout6" type="button" value="Section4" id="myBtn5"></input>
<span class="third"></span>
<span class="fourth"></span>
</div>
.myclass2{
display:none;
}
.myclass:hover+.myclass2{
display:block;
}
<div class="myclass" id="that">
<input class="logout1" type="button" value="All" id="myBtn">
<input class="logout2" type="button" value="Section Wise" id="myBtn1"></input>
<span class="first"></span>
<span class="second"></span>
</div>
<div class="myclass2" id="this">
<input class="logout3" type="button" value="Section1" id="myBtn2">
<input class="logout4" type="button" value="Section2" id="myBtn3">
<input class="logout5" type="button" value="Section3" id="myBtn4"
<input class="logout6" type="button" value="Section4" id="myBtn5">
<span class="third"></span>
<span class="fourth"></span>
</div>
This works - you need position
HOWEVER you cannot click the new buttons - so see second example
#this { position:absolute; width: 300px }
#that:hover + #this {
right: 100px
}
<div class="myclass" id="that">
<input class="logout1" type="button" value="All" id="myBtn" />
<input class="logout2" type="button" value="Section Wise" id="myBtn1" />
<span class="first">First</span>
<span class="second">Second</span>
</div>
<div class="myclass2" id="this">
<input class="logout3" type="button" value="Section1" id="myBtn2" />
<input class="logout4" type="button" value="Section2" id="myBtn3" />
<input class="logout5" type="button" value="Section3" id="myBtn4" />
<input class="logout6" type="button" value="Section4" id="myBtn5" />
<span class="third">Third</span>
<span class="fourth">Fourth</span>
</div>
I THINK you mean this:
/*
$("#myBtn").on("click",function() {
$("#this").toggle()
})
*/
$("#myBtn").on("mouseenter",function() {
$("#this").show();
})
$("#myBtn").on("mouseleave",function() {
setTimeout(function() { $("#this").hide(); },3000);
})
#this { display:none }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="myclass" id="that">
<input class="logout1" type="button" value="All" id="myBtn" />
<input class="logout2" type="button" value="Section Wise" id="myBtn1" />
<span class="first">First</span>
<span class="second">Second</span>
</div>
<div class="myclass2" id="this">
<input class="logout3" type="button" value="Section1" id="myBtn2" />
<input class="logout4" type="button" value="Section2" id="myBtn3" />
<input class="logout5" type="button" value="Section3" id="myBtn4" />
<input class="logout6" type="button" value="Section4" id="myBtn5" />
<span class="third">Third</span>
<span class="fourth">Fourth</span>
</div>
If you just wan't to make your that div visible when you hover this.
Then you can use visibile properties, can be managed with css or jquery method.
Css method
#that:hover + #this{
visibility : visible;
}
#this{
visibility : hidden;
}
Jquery method
Something like :
$('#this').hide();
$('#that').hover(function(event){
$('#this').show();
});
I would remove the classes or the ids (or keep them if you need them for something else...) however here is an SCSS that can solve this issue for you:
Here, I removed the classes, but as I mentioned above, you can keep the classes and remove the Ids or keep them both :)
#this {
display: none;
}
#that {
&:hover {
+ {
#this {
display: block;
}
}
}
}
I am trying to build a smiley survey using only Front-End.
After hitting one of my radio buttons, the content should become visible for comments. My CSS is set up to display: none.
I have tried to do it using jQuery but nothing seems to be working.
Many thanks for your suggestions!
$("input[type='radio']").change(function(event) {
var id = $(this).data('id');
$('#' + id).addClass('face-cc').siblings().removeClass('none');
});
<div class="cc-selector row" id="moods">
<div class="col">
<input type="radio" type="radio" name="smile" value="angry" />
<label class="face-cc" for="angry">
<span class="far fa-angry" aria-hidden="div"></span>
</label>
<p>Terrible</p>
</div>
<div class="col">
<input type="radio" name="smile" value="grin-stars"/>
<label class="face-cc" for="grin-stars">
<span class="far fa-grin-stars" aria-hidden="div"></span>
</label>
<p>Excellent</p>
</div>
</div>
<div class="none" id="text">
<div class="container">
<form action="/action_page.php">
<div class="row p-5">
<div class="col-sm-12">
<div class="form-group shadow-textarea">
<label for="feedback">If you have any additional feedback,
please let us know below...
</label>
<textarea class="form-control p-2" id="comment" rows="7"
cols="20" placeholder="Comment here...">
</textarea>
</div>
<button type="submit" class="btn btn-danger">
Submit
</button>
</div>
</div>
</form>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
There are a few things incorrect with your approach. First is your use of the radio buttons in the HTML. For you to easily grab their individual click events and inspect their value, you want to add id attributes to them. I added some id's myself based on the radio button's name attribute that you already added.
Second, the jQuery which you used I changed completely to match thew use of the id attribute which I just added. This will look to see which radio button we just clicked on and if it matches the id of the radio button which will show the element, then we show the element accordingly.
You can also accomplish show/hide via CSS. I removed your CSS class of display: none; for the above to work, but you can keep it and use jQuery's toggleClass or addClass and removeClass using the above logic.
A few other comments. I simplified the logic by adding a ternary which you can read more on if you have not seen this syntax.
Last but not least is a quick search on StackOverflow can help, I found this answer which is the exact fix which you needed in your code from a jQuery perspective. I took the time to explain my approach here because you also needed HTML and CSS fixes to your approach.
If you think this answer helped, then feel free to 'accept' or 'mark up' the answer and welcome to Stack Overflow.
var text = $('#text');
var showId = 'grin-stars';
$('input[type="radio"]').click(function() {
$(this).attr('id') === showId ? text.show() : text.hide();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cc-selector row" id="moods">
<div class="col">
<input id="angry" type="radio" name="radioBtn" value="angry" />
<label class="face-cc" for="angry">
<span class="far fa-angry" aria-hidden="div"></span>
</label>
<p>Terrible</p>
</div>
<div class="col">
<input id="grin-stars" type="radio" name="radioBtn" value="grin-stars"/>
<label class="face-cc" for="grin-stars">
<span class="far fa-grin-stars" aria-hidden="div"></span>
</label>
<p>Excellent</p>
</div>
</div>
<div id="text">
<div class="container">
<form action="/action_page.php">
<div class="row p-5">
<div class="col-sm-12">
<div class="form-group shadow-textarea">
<label for="feedback">
If you have any additional feedback, please let us know below...
</label>
<textarea class="form-control p-2" id="comment" rows="7"
cols="20" placeholder="Comment here...">
</textarea>
</div>
<button type="submit" class="btn btn-danger">
Submit
</button>
</div>
</div>
</form>
</div>
</div>
I want to hide and show div on check and uncheck of checkbox. I am getting the parent and finding the div which I want to hide. But code is not running
Jquery is:
$('.show-check').click(function() {
if (this.checked) {
$(this).parent().find('.div-check').fadeIn('slow');
} else
$(this).parent().find('.div-check').fadeOut('slow');
});
HTML:
<div class="type-details">
<span class="form-label">Logo:</span>
<div class="switch">
<label>
<input type="checkbox" class="show-check" checked>
<span class="lever"></span>
</label>
</div>
<div class="landing-inputfile div-check">
<div class="col-xs-12 no-padding">
<div class="input-group">
<input type="text" class="file-input" placeholder="No file" readonly>
<label class="input-group-btn">
<span class="btn btn-default btn-flat btn-basic2">
UPLOAD <input type="file" style="display: none;">
</span>
</label>
</div>
</div>
</div>
</div>
Why your code does not work :
$(this).parent() will give you label - and find('.div-check') won't return anything.
Use closest() - to get a common parent which has the desired child element,
$(this).closest('.type-details').find('.div-check').fadeIn('slow');
Also, I'd suggest you use change() event instead of click() on checkbox in the below,
$('.show-check').click(function() {
Use this script instead
$('.show-check').click(function() {
if ($(this).prop('checked')) {
$(this).parents('.type-details').find('.div-check').fadeIn('slow');
} else
$(this).parents('.type-details').find('.div-check').fadeOut('slow');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="type-details">
<span class="form-label">Logo:</span>
<div class="switch">
<label>
<input type="checkbox" class="show-check" checked>
<span class="lever"></span>
</label>
</div>
<div class="landing-inputfile div-check">
<div class="col-xs-12 no-padding">
<div class="input-group">
<input type="text" class="file-input" placeholder="No file" readonly>
<label class="input-group-btn">
<span class="btn btn-default btn-flat btn-basic2">
UPLOAD <input type="file" style="display: none;">
</span>
</label>
</div>
</div>
</div>
</div>
Use $('input').is(':checked')
In your example: $(this).is(':checked')
You have to use parents() to select the correct wrapper to find your element div-check
var $check = $(this).parents('.type-details').find('.div-check');
$('.show-check').click(function() {
if ($(this).is(':checked')) {
$check.fadeIn('slow');
} else
$check.fadeOut('slow');
});
Use $(this).closest(".type-details").find('.div-check') to get the div-check div and hide/show it.
$('.show-check').click(function() {
if (this.checked) {
$(this).closest(".type-details").find('.div-check').fadeIn('slow');
} else {
$(this).closest(".type-details").find('.div-check').fadeOut('slow');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="type-details">
<span class="form-label">Logo:</span>
<div class="switch">
<label>
<input type="checkbox" class="show-check" checked>
<span class="lever"></span>
</label>
</div>
<div class="landing-inputfile div-check">
<div class="col-xs-12 no-padding">
<div class="input-group">
<input type="text" class="file-input" placeholder="No file" readonly>
<label class="input-group-btn">
<span class="btn btn-default btn-flat btn-basic2">
UPLOAD <input type="file" style="display: none;">
</span>
</label>
</div>
</div>
</div>
</div>
$('.show-check').click(function() {
if ($(this).is(":checked")) {
$(this).closest('.type-details').find('.div-check').fadeIn('slow');
} else
$(this).closest('.type-details').find('.div-check').fadeOut('slow');
});
Try this code :
$('.show-check').click(function() {
$(this).toggleClass('checked unchecked');
if ($(this).hasClass('checked')) {
$(this).parents('.type-details').find('.div-check').fadeIn('slow');
} else {
$(this).parents('.type-details').find('.div-check').fadeOut('slow');
}
});
<input type="checkbox" class="show-check checked" checked>
I'm doing a custom checkbox variant, which uses hidden input elements. My problem is that normal checkboxes only post their value to the server, if the checkbox is checked. These custom checkboxes post values no matter what, so I have no way of knowing if the checkbox is actually checked or not, when reading the data server side.
Here is the fiddle I have used as an example
HTML:
<div class="row" id="checkboxes">
<div class="col-xs-12">
<div class="form-group">
<div class="col-md-6">
<input name="checkbox1" type="hidden" value="0"/>
<input name="checkbox2" type="hidden" value="0"/>
<input name="checkbox3" type="hidden" value="0"/>
<div class="btn-group" data-toggle="buttons">
<button type="button" class="btn btn-default" data-checkbox-name="checkbox1">Yes</button>
<button type="button" class="btn btn-default" data-checkbox-name="checkbox2">Maybe</button>
<button type="button" class="btn btn-default" data-checkbox-name="checkbox3">No</button>
</div>
</div>
</div>
</div>
</div>
JavaScript:
$('.btn[data-checkbox-name]').click(function() {
$('input[name="'+$(this).data('checkboxName')+'"]').val(
$(this).hasClass('active') ? 0 : 1
);
});
Now, in this matter, it actually uses the value of the checkbox to signal if it is checked or not. I however, need an arbitrary number of checkboxes, and I need all of the checkboxes to be able to send a specific value, instead of a name and a 0/1. Yes it is possible for me to programmatically give the checkboxes names where my needed value is a part of the name, and then substring-interpret it server side, but I'd rather return them seperately, for overview and simplicity.
So here is my version of the code:
HTML:
<div class="row" id="checkboxes">
<div class="col-xs-12">
<div class="form-group">
<div class="col-md-6">
<input name="checkbox1" type="hidden" value="A" data-value="0"/>
<input name="checkbox2" type="hidden" value="B" data-value="0"/>
<input name="checkbox3" type="hidden" value="C" data-value="0"/>
<div class="btn-group" data-toggle="buttons">
<button type="button" class="btn btn-default" data-checkbox-name="checkbox1">Yes</button>
<button type="button" class="btn btn-default" data-checkbox-name="checkbox2">Maybe</button>
<button type="button" class="btn btn-default" data-checkbox-name="checkbox3">No</button>
</div>
</div>
</div>
</div>
</div>
JavaScript:
$('.btn[data-checkbox-name]').click(function() {
$('input[name="'+$(this).data('checkboxName')+'"]').data("value",
$(this).hasClass('active') ? 0 : 1
);
});
I've pretty much just changed so that it uses data-value instead of value, to keep track of it's 0/1 state, which leaves value unchanged. But now I have no way of knowing if it is checked or not. Is there a way I can filter the results client side, before sending them, using the data-value as a filter value?
I'm already using JQuery, if that helps.
Let's assume we don't use AJAX, no need to overcomplicate things. As Paul stated, the general approach is to use standard checkboxes.
<div class="row" id="checkboxes">
<div class="col-xs-12">
<div class="form-group">
<div class="col-md-6">
<input name="checkbox1" type="checkbox" value="A" class="hide"/>
<input name="checkbox2" type="checkbox" value="B" class="hide"/>
<input name="checkbox3" type="checkbox" value="C" class="hide"/>
<div class="btn-group" data-toggle="buttons">
<button type="button" class="btn btn-default" data-checkbox-name="checkbox1">Yes</button>
<button type="button" class="btn btn-default" data-checkbox-name="checkbox2">Maybe</button>
<button type="button" class="btn btn-default" data-checkbox-name="checkbox3">No</button>
</div>
</div>
</div>
</div>
</div>
And
$('.btn[data-checkbox-name]').click(function() {
$('input[name="'+$(this).data('checkboxName')+'"]').prop('checked',
!$(this).hasClass('active')
);
});
When the form is submitted the default behavior of the checkboxes is preserved: only the checked checkboxes will be sent.
That's is the html structure: (see also in jsfiddle here: http://jsfiddle.net/hQ5dZ/)
<div id="fields">
<div>
<input type="file" />
<input type="button" value="+add">
<div>
<div>
<input type="file" />
<input type="button" value="+add">
<div>
</div>
The second jQuery-statement below does not work, why?
$('#fields').children().hide();
$('#fields :first-child').show();
EDIT: Desired Behaviour -> First div-child (with its content) should appear
Your markup is invalid — you are not closing the <div> and <input> tags:
<div id="fields">
<div>
<input type="file" />
<input type="button" value="+add" />
</div>
<div>
<input type="file" />
<input type="button" value="+add" />
</div>
</div>
After changing the markup to a valid syntax, it's working - http://jsfiddle.net/teddyrised/nBbxY/
You were not closing the div elements, instead was creating new div child which was causing the #fields element to have only one child.
So $('#fields').children().hide() was hiding the child and then $('#fields > :first-child').show() was displaying it back.
<div id="fields">
<div> <!-- fc-1 -->
<input type="file" /> <!-- fc-2 -->
<input type="button" value="+add" />
</div> <!--not closed-->
<div>
<input type="file" /> <!-- fc-3 -->
<input type="button" value="+add" />
</div>
</div> <!--not closed-->
$('#fields').children().hide();
$('#fields > :first-child').show();
Demo: Fiddle
Also the second selector is updated because #fields :first-child will select all descendant elements of #fields which are the first child of its parent, in the above markup it will select all fields marked as fc-x
Besides closing the needed tags you can shorten you jQuery code like so, for example:
$('#fields').children().hide().eq(0).show();
Working example online: http://jsfiddle.net/nBbxY/1/