I have simple radio button, using bootstrap like this
<div class="radio">
<label>
<span class="btn btn-danger">
<input type="radio" name="tipe" value="str" style="display: none;" /> A
</span> Strength
</label>
</div>
<div class="radio">
<label>
<span class="btn btn-danger">
<input type="radio" name="tipe" value="agi" style="display: none;" /> B
</span> Agility
</label>
</div>
<div class="radio">
<label>
<span class="btn btn-danger">
<input type="radio" name="tipe" value="int" style="display: none;" /> C
</span> Intelligence
</label>
</div>
So what i want really to do is, when i click the radio, the span class is change from btn-danger into btn-success. Of course previous button that has btn-success is would be back into btn-danger again. I try with my javascript code but it wouldn't work out.
$(document).ready(function() {
$("label").click(function() {
if ($(this).children().children().is(":checked")) {
$(this).children().attr("class", "btn btn-success");
} else {
$(this).children().attr("class", "btn btn-danger");
}
});
});
Ok when I click the radio it turned in to green (btn-success), but when i check another radio, it turned in to green but previous radio which i click it, it still green (still has btn-success class). Can someone help me? Thanks :)
You also need to remove/add the proper CSS class from unckecked radio's parent element element.
Also .addClass() and .removeClass() can be used to add and remove the CSS class. Here in the example I have also used .filter()
$(document).ready(function() {
$("label").click(function() {
//Cache elements
var radioElem = $(":radio[name=tipe]");
//Remove the btn-success and add btn-danger class to all the parent element of radio
radioElem.parent().removeClass('btn-success').addClass('btn-danger');
//Filter out checked radio and add/remove the classes
radioElem.filter(":checked").parent().addClass('btn-success').removeClass('btn-danger');
});
});
.btn-danger {
color: red
}
.btn-success {
color: green
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="radio">
<label>
<span class="btn btn-danger">
<input type="radio" name="tipe" value="str" style="display: none;" /> A
</span> Strength
</label>
</div>
<div class="radio">
<label>
<span class="btn btn-danger">
<input type="radio" name="tipe" value="agi" style="display: none;" /> B
</span> Agility
</label>
</div>
<div class="radio">
<label>
<span class="btn btn-danger">
<input type="radio" name="tipe" value="int" style="display: none;" /> C
</span> Intelligence
</label>
</div>
On change of any radio button iterate loop through all the radio buttons and check whether the radio button is checked or not and accordingly made change the classes of the parent div. Please refer the below snippet for more understanding.
$("input[type='radio']").on("change",function(){
$("input[type='radio']").each(function(){
if($(this).is(':checked')){
$(this).parent().removeClass('btn-danger').addClass('btn-success');
}else{
$(this).parent().removeClass('btn-success').addClass('btn-danger');
}
});
});
.btn-danger {
color: red
}
.btn-success {
color: green
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="radio">
<label for="radio-A">
<span class="btn btn-danger">
<input id="radio-A" type="radio" name="tipe" value="str" style="display: none;" /> A
</span> Strength
</label>
</div>
<div class="radio">
<label for="radio-B">
<span class="btn btn-danger">
<input id="radio-B" type="radio" name="tipe" value="agi" style="display: none;" /> B
</span> Agility
</label>
</div>
<div class="radio">
<label for="radio-C">
<span class="btn btn-danger">
<input id="radio-C" type="radio" name="tipe" value="int" style="display: none;" /> C
</span> Intelligence
</label>
</div>
You are only checking the children of the clicked button and set or rest that one. But you have to reset the children of the buttons that have not been clicked in order to make them red again.
You could do something like
$(document).ready(function() {
$("label").click(function() {
$("label").children().attr("class", "btn btn-danger"); // reset all
$(this).children().attr("class", "btn btn-success"); // set current
});
});
It is very simple
if(!$('[name="tipe"][value="str"]').is(':checked')) {
alert("it's not checked");
}
Try this code,
$(document).ready(function() {
$('label').click(function() {
$('label').find('span').attr('class','btn btn-danger');
if ($(this).find('input:checked')) {
$(this).find('span').attr('class','btn btn-success');
}
});
});
Thanks!
You can just replace above jQuery code with below code
$(document).ready(function() {
$("label").click(function() {
if ($(this).find('input[type="radio"]').is(':checked')) {
$(this).children('span').removeClass('btn btn-danger').addClass('btn btn-success');
} else {
$('label').children('span').removeClass('btn btn-success').addClass('btn btn-danger');
}
});
});
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 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>
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/
I am trying to change the content by selecting the different radio button. My codes seem not working. Any problem with it? Here is the FIDDLE:
HTML
<div id="category-table" style="display: block;">
<div class="btn-group" data-toggle="buttons" style="float:right;">
<label class="btn btn-show-category active">
<input type="radio" name="options" id="option1" autocomplete="off" value="A-categories" checked=""> A Categories
</label>
<label class="btn btn-show-category">
<input type="radio" name="options" id="option2" autocomplete="off" value="B-categories"> B Categories
</label>
</div>
<br><br>
<div class="all-categories">
<div class="content-header">Category A</span></div>
</div>
<div class="used-categories" style="display:none;">
<div class="content-header">Category B</span></div>
</div>
</div>
JS
$(document).ready(function () {
$('input[type="radio"]').click(function () {
if ($(this).attr("value") == "A-categories") {
$(".used-categories").hide();
$(".all-categories").show();
}
if ($(this).attr("value") == "B-categories") {
$(".all-categories").hide();
$(".used-categories").show();
}
});
});
Any Suggestion?
Just check fiddle. It looks like you did not include jquery js file.
make the click event to change event in radio button.
I have update the fiddle check it out
Here is the updated fiddle
What I am trying to accomplish:
I am trying to make a form where when a user selects yes a div slides down, and when the user selects no the div slides up (thus making what is in that div invisible). and I want this to have a nice display (to look almost like a button in a group that can toggle and only one is able to toggle at a time such as a radio button) it should look more or less like this:
http://getbootstrap.com/components/#btn-groups
What my problem is:
When I toggle this button it will not fire a function.
Where it gets weird
I notice that when I don't set the data-toggle="buttons" I get radio buttons that have the little circle and fire the function, but when I set data-toggle="buttons" it will not fire the function.
Here is my form:
<form id="questionnaire">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default">
<input class="btn btn-default" data-role="none" type="radio" value="yes" name="vomit" />yes
</label>
<label class="btn btn-default">
<input class="btn btn-default" data-role="none" type="radio" value="no" name="vomit" />no
</label>
</div>
<div class="expand">
<h4>How many times?</h4>
<div class="input-group">
<span class="input-group-addon">#</span>
<input type="number" class="form-control">
</div>
</div>
and the function I am trying to fire:
$('#questionnaire input[name=vomit]').on('change', function () {
var $p = $('.expand');
if ($('input[name=vomit]:checked').val() == "yes") {
//alert("hello");
$p.slideDown();
}
else {
//alert("nope");
$p.slideUp();
}
});
Can anyone please help me get the radio button to look like the bootstrap (and once selected they stay the color) one but that functions?
Thanks
I ended up using this switch here :
http://proto.io/freebies/onoff/
here is the html:
<h4>Did you Vomit?</h4>
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="vomit" />
<label class="onoffswitch-label" for="vomit">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
<div class="expand">
<div class="input-group">
<span class="input-group-addon">#</span>
<input type="number" class="form-control">
</div>
</div>
here is the jquery
$("#vomit").change(function () {
var $p = $('.expand');
if ($(this).is(':checked')) {//this is true if the switch is on
$(this).val("Yes");
$p.slideDown();
}
else {
$(this).val("No");
$("#numVomit").val(0);
$p.slideUp();
}
});
It seems like there was truly a conflict with jquery, bootstrap and jquery-ui. I will have to end up doing some code cleanup to see exactly where it is conflicting.