I have this: http://jsfiddle.net/ptWhn/
<pre>
/*HTML*/
`<label class="for_radio"><input type="radio"><span>radio-button-1</span></label>`
`<label class="for_radio"><input type="radio"><span>radio-button-2</span></label>`
/*jQuery*/
$(document).ready(function(){
$('input[type="radio"]').click(function() {
if($('input[type="radio"]').is(':checked')) {
$(this).closest('label').addClass('active');}
else {
$(this).closest('label').removeClass('active');
}
});
});
/*CSS*/
.active {
background: #ffc;
}
</pre>
... which works in the sense that the label's background color changes when the radio button is selected, except that I can't figure out how to remove the .active class which changes the background color when one of the radio buttons is UNchecked. And also in jsfiddle, for some reason, the alternate radio button doesn't de-select when the other one is clicked.
The second thing I'm having trouble figuring out why is why I seem to need the .click(function() before the if statement. That is,
if($('input[type="radio"]').is(':checked')) {
$(this).closest('label').addClass('active');}
... doesn't work by itself as a JS snippet. Why?
Would appreciate any insight. Thanks.
Firstly, change your pre tags to script tags.
Instead of using an if statement to add and remove the class, why don't you just use toggleClass()?
$('input[type="radio"]').click(function() {
if($('input[type="radio"]').is(':checked')) {
$(this).closest('label').toggleClass('active');
}
});
You don't need the if statement, try this:
$(document).ready(function(){
$('input[type="radio"]').click(function() {
$('input:not(:checked)').parent().removeClass("active");
$('input:checked').parent().addClass("active");
});
});
Also, you said "the alternate radio button doesn't de-select when the other one is clicked."
Add name attribute to your inputs, ie: Name="Group1"
Okay, so a few things here.
First, radio buttons in a group need to have the same name. For example:
<label class="for_radio"><input type="radio" name="buttons"><span>radio-button-1</span></label>
<label class="for_radio"><input type="radio" name="buttons"><span>radio-button-2</span></label>
This will take care of the issue of the alternate button not deselecting.
To fix the issue of adding and removing your class use jQuery toggleClass:
$('input[type="radio"]').click(function() {
$(this).closest('label').toggleClass('active');
});
There is no need for the if statement. Hope that helps.
I'll try and answer the question, since everyone is focused on the fact you're using <pre> instead of <script>.
$('input[type="radio"]').on('change',function() {
$('label.active').removeClass('active'); //removes class on old active label
$(this).parent().addClass('active'); // adds class to new active label
}
The reason I did it this way instead of using .toggleClass() is because this will actually work if you have more than two radio buttons.
Related
I'm trying to learn how to make HTML text toggle with jQuery, which is pretty easy in itself, but I want the text to be hidden automatically until it is clicked on with a button. I've looked it up and I can't find how to do this. I figured it should be easy, and I have this part
<h4 id="text1">This is some toggleable text</h4>
$(document).ready(function(){
$("#button1").click(function(){
$("#text1").toggle();
});
});
Which works fine as a regular toggle, but this leaves the text there until first clicked on.
Codepen: https://codepen.io/anon/pen/bYYeEB
The jQuery show,hide and toggle functions simply alter the CSS display property to have either display: block; or display: none;.
To start with your element hidden just set the style attribute style="display:none;".
$(document).ready(
function(){
$("#button1").click(toggle);
}
);
function toggle() {
$("#text1").toggle();
}
toggle();
Calling toggle at the bottom will auto hide the element. This still isn't the greatest since the element will show until this code runs.
But you can always change the HTML to read like this:
<h4 id="text1" style="display:none">This is some toggleable text</h4>
Then you don't need to call toggle the first time.
<script>
$(document).ready(function() {
$("#text1").css("display", "none");//you just have to add this line
$("#button1").click(function() {
$("#text1").toggle();
});
});
</script>
When I click an input radio, <label>'s text should change it's text color.
However it doesn't do the trick with my jQuery code:
$("#radios").find("input").change(function(){
if ($(this).checked)
$(this).parent().addClass('libelulas');
else
$(this).parent().removeClass('libelulas');
});
I've been checking with the inspector in chrome and seems like it doesn't even create the class wherever is the parent (label) or the input.
Here's my jsfiddle http://jsfiddle.net/Arkl1te/2MnEU/4/
You needed to wrap it in $(document).ready and use a correct selector on the change() event:
$(document).ready(function(){
$(".radios input[type=radio]").change(function(){
$(this).parent().addClass('libelulas');
});
});
jsFiddle here.
Update:
Forgot to give example in relation to your code in the question and not just the jsFiddle:
$(document).ready(function(){
$(".radios input[type=radio]").change(function(){
$(this).parent().addClass('libelulas');
$("input[type=radio]:not(:checked)").parent().removeClass('libelulas');
});
});
jsFiddle here.
I'm fairly new to Jquery and Javascript in general and I was wondering, how do I change text on a button after hiding something.
as far as i know, you hide something via this code:
$("element").click(function() {
$("element2").hide("slow");
});
and to show something:
$("element").click(function() {
$("element2").fadeIn("slow");
});
so what i want to do is have an article type thing, and when a "hide" button is pressed, it hides all the paragraph text, but leaves another button saying "show"
How do I accomplish this?
You just need one button and change its text. Lets assume all the content is visible from the beginning. Add a button to your HTML and give it an ID so you can easily identify it:
<button id="toggleButton" type="button">Hide</button>
Then bind an event handler to the button which
toggles the visibility of the elements you want to show/hide and
changes the text content of the button
And here it is:
$('#toggleButton').click(function() {
// toggle visibility if all p elements
$('p').toggle();
// Change text based on current text
// If the current text is 'Hide' then we just hid the elements and
// we have to change the text to 'Show' (and vice versa).
$(this).text(function(i, current_text) {
return current_text === 'Hide' ? 'Show' : 'Hide';
});
});
DEMO
Reference: .click, .toggle, .text, conditional operator.
You have to adjust the selector to only match elements you really want to hide, but jQuery has great documentation about all possible selectors.
jQuery's documentation is pretty extensive and spending some time just reading through is worthwhile.
Since you are just starting, I recommend to read http://eloquentjavascript.net/ and/or the MDN JavaScript Guide, and the jQuery tutorial (in that order).
To Hide:
$("element").click(function() {
$("element2").hide("slow");
$("element").text('Show');
});
To Show:
$("element").click(function() {
$("element2").fadeIn("slow");
$("element").text('Hide');
});
Change button value like
$("element").click(function() {
$("element2").hide("slow");
$("#btnID").prop('value', 'Show');
});
$("element").click(function() {
$("element2").fadeIn("slow");
$("#btnID").prop('value', 'Hide');
});
I usually have two buttons, one with text show and another with hide text, then when you click in one of them show one and make all the stuff necessary and hide it shelf.
HTML:
Show
Hide
<p id="textshow" style="display:none"> lorem ipsum</p>
Javascript:
$('#bshow').click(function() {
$('#bhide').fadeIn();
$('#textshow').fadeIn();
$(this).hide();
});
I think this jsFiddle can help you:
Hi I have the following HTML repeated in my page (obviously the names, for and id attributes change in each instance):
<div class="funkyCheckBox">
<label for="uniqueName"> Whatever Text </label>
<input type="checkbox" name="uniqueName" id="uniqueName" />
</div>
What this does with some CSS is make the give the appearance of a big button, the input is hidden and I add a class to the div depending on the checked value of the input. I use the following JavaScript /jQuery for this
$(".funkyCheckBox").live("click, tap", function(event){
$(this).toggleClass("funkyCheckBoxActive");
var nextCheckBox = $(this).find("input[type=checkbox]");
nextCheckBox.prop("checked", !nextCheckBox.prop("checked"));
});
Now this was all fine and good but during testing I noticed that if you click on the label text the class was not applied and the value of the input isn't toggled... thus I added the following...
$(".funkyCheckBox label").live("click, tap", function(event){
$(this).parent("div").toggleClass("funkyCheckBoxActive");
var nextCheckBox = $(this).next("input[type=checkbox]");
nextCheckBox.prop("checked", !nextCheckBox.prop("checked"));
});
Now this is great as clicking the label text now changes the value of the input however the parent DIV is not taking / toggling the "funkyCheckBoxActive" class. I am unsure why is as I then used console.log($(this).parent("div")) within the callback function and I am outputting the attributes of th dom object. Does anyone know why my toggleClass is not being applied?
Depending on the version of jQuery, your code will work or not.
Note that the browser is already toggling the checkbox when you click on a label that references it; so you would only need to do this:
$('#uniqueName').change(function() {
$(this).parents("div").toggleClass("funkyCheckBoxActive");
});
please use the "on" method instead of "live" as it is deprecated. also the "for" attribute in LABEL Tag points to an existing Id.
here is the corrected and working code:
<div class="funkyCheckBox">
<label for="uniqueName"> Whatever Text </label>
<input type="checkbox" name="uniqueName" id="uniqueName" />
</div>
and
$(".funkyCheckBox label").click(function(event){
$(this).parent("div").toggleClass("funkyCheckBoxActive");
var nextCheckBox = $(this).next("input[type=checkbox]");
var nextCheckBoxValue = nextCheckBox.val();
nextCheckBox.val(! nextCheckBoxValue);
});
EDIT: here is the jsFiddle link
http://jsfiddle.net/RUYWT/
EDIT2: #Mike Sav: I have revised your code and it's working now with all possible cases:
http://jsfiddle.net/RUYWT/11/
I have a very novice question, so apologies if the answer to this is obvious.
I am using JQuery to toggle the contents of items based on whether the item has been clicked. I have been able to successfully implement the toggle feature.
I now need to have it load with the first two items set to show() with the rest set to hide(). I have given a unique class name to these first 2 items. I know that I can simply do a $('div.activeitem').show() and then hide thee rest, but I'd prefer to setup a condition.
I am a JQuery novice, so I don't know how to target these elements or their classes in a conditional statement. I've searched google but have been unsuccessful. I want a conditional that asks if the div "newsinfo" also has the class "jopen" then show(), else hide().
Thanks for your help. I have attached my code to help you understand the context of my question:
<script type="text/javascript">
$(document).ready(function(){
// Here is where I'd like to implement a conditional
$('div.newsinfo').hide(); // this would be part of my else
$('h5.newstoggle').click(function() {
$(this).next('div').slideToggle(200);
return false;
});
});
</script>
How about simply
$('div.newsinfo').each(function(){
if($(this).hasClass('jopen')){
$(this).show()
}else{
$(this).hide();
}
});
there is hasClass() function. Better way is using toggleClass().
For example:
$('div.blocks').click(function(){
$(this).toggleClass('class_name');
});
after first click class will be added, after second - removed... and so on ^^
JQuery has an .hasClass function.
i.e.
if($(".selectableItem").hasClass("selected")){
//remove selection
$(".selectableItem").removeClass("selected");
}else{
//remove the selected class from the currently selected one
$(".selectableItem .selected").removeClass("selected");
//add it to this one
$(".selectableItem").addClass("selected");
}
Why don't you add a default css to jopen class to display: block and the others to display: none ?
something like
.newsinfo {display: none}
.jopen {display:block!important}
Just use selectors. For example, if all divs with the class "newsinfo" are visible by default:
$("div.newsinfo:not(.jopen)").hide();
If they're all hidden by default:
$("div.newsinfo.jopen").show();