jquery grouped buttons change appearance after click - javascript

i made 3 buttons in jquery mobile lets say (coffee, cola, water) grouped horizontally, I want them to behave like when I click one of them (coffee) the clicked button will change its appearance to clicked state and I wont be able to click it again (take note that when I disable a button it changes its color to gray also). then when i click cola, coffee returns to normal and cola turns to clicked state.
<div id="ui-26">
<div class="ui-segment" data-role="controlgroup" data-type="horizontal" >
<input type="button" name="segment-coffee" id="segment-coffee" class="custom" value="coffee" />
<input type="button" name="segment-cola" id="segment-cola" class="custom" value="cola" />
<input type="button" name="segment-water" id="segment-water" class="custom" value="water" />
</div>
</div>
i tried using the radio button but i cant assign a background image on it so i decided to use grouped buttons. how should this be done on jquery? thanks in advance!

I think http://jsfiddle.net/rcNfJ/2/ is what you are looking for? I just used attr("disabled") but you can do whatever you want to them (change their css, manipulate data, etc).

http://jqueryui.com/demos/button/#radio
I think this is what you are searching for :)
You can use icons option to set icons for them.
EDIT:
Here is alternative solution then :)
$(function() {
$('#ui-26 > .ui-segment > input').click(function(){
if($(this).is(':disabled')) return;
$('#ui-26 > .ui-segment > input').prop('disabled',false);
$(this).prop('disabled',true);
});
});

Related

If certain radio buttons checked, display div else display different div?

:) So I'm trying to create a user questionaire type form, it doesnt have to send to anyone just display a div once certain radio buttons are checked and if them certain radio buttons arent checked then display a different div, but also when the webpage opens/refreshes none of the div's I want to display to be displayed (if that makes sense?). I found some code on here to try but it didnt work for me, I'm a noob with JS & Jquery but was hoping anyone could shed some light on my problem. please find my code below.
Jquery?
if($('input[value=yes1]:checked,
input[value=yes2]:checked,
input[value=yes3]:checked,
input[value=yes4]:checked').length == 4){
$("#correct").show();
}else{
$("#correct").hide();
HTML
<div class="row">
<div class="left">
<div class="right answer">
<div class="leftradio">
<input type="radio" id="yes1" value="yes1" name="iCheck1">
<label>Yes</label>
</input>
</div>
<div class="rightradio">
<input type="radio" id="no1" name="iCheck1">
<label>No</label>
</input>
</div>
</div>
</div>
<div class="right">
<div class="right answer">
<div class="leftradio">
<input type="radio" id="yes2" value="yes2" name="iCheck2">
<label>Yes</label>
</input>
</div>
<div class="rightradio">
<input type="radio" id="no2" name="iCheck2">
<label>No</label>
</input>
</div>
</div>
</div>
Yes
No
Yes
No
CSS
#correct{width:100%; height:50px; background:green; display:none;}
#incorrect{width:100%; height:50px; background:red; display:none;}
I think this is what you're looking for. I had to change the number of "correct" answers to two because that's all the html you have.
JS:
$( "input" ).on( "click", function() {
if($('input[value=yes1]:checked, input[value=yes2]:checked').length === 2){
$("#correct").show();
}else{
$("#correct").hide();
}
});
Working JS Fiddle: http://jsfiddle.net/akj84vrq/12/
A little something like this would probably get you what you want.
http://jsfiddle.net/uu512erm/
Listen for change event on the radio inputs by $('input:radio').change(function(){}
and then just add the logic inside.
I'm not sure that this can be accomplished via CSS.
Now, you are checking against some values/elements that don't exist in your code (ie input[value=yes3]:checked, you don't have input with that value, check it for yourself).
I don't understand what exactly you want to accomplish, but I will still try to help and since you're new let's keep it very basic:
if ($('input[value=yes1]').is(':checked') && $('input[value=yes2]').is(':checked')) {
// this will fire only if input with values yes1 and yes2 is checked
$('div_to_show').show(); // put your own selectors here
$('div_to_hide').hide(); // put your own selectors here
}
if ($('input[value=no1]').is(':checked') && $('input[value=no2]').is(':checked')) {
// this will fire only if input with values no1 and no2 is checked
$('some_other_div_to_show').show(); // put your own selectors here
$('some_other_div_to_hide').hide(); // put your own selectors here
}
if ($('input[value=yes1]').is(':checked') && $('input[value=no1]').is(':checked')) {
# this will fire only if both input with values yes1 and no1 is checked
$('some_other_div_to_show').show(); # put your own selectors here
$('some_other_div_to_hide').hide(); # put your own selectors here
}
# and so on... just type in your conditions and that's it.
If you need some other cases, just add them using this pattern or construct one complex else if statement with all your scenarios.

Display a number of divs one at a time (like a deck of cards)

I'm making a survey form. It is supposed to display one question at a time.
Every question has a number of radio buttons. When one radio button is clicked the question will be removed (display: none; maybe with a sliding animation) and the next one will come into view.
Here's a simplified version of the form and the structure we have so far. I haven't done that much front end programming before - so I don't know if there's a simple standard way of doing this doing this with Javascript or jQuery?
Would very much appreciate some pointers in the right direction.
Here's the concept:
Display div with question #1
Click radiobutton
Hide div with question #1
Display div with question #2
Click a radiobutton
Hide div with question #2
etc...
<form method="post">
<div id="question_1">
<div class="question">
Question 1
</div>
<div class="table">
<input type="radio" value="1" name="rb_1">
<input type="radio" value="2" name="rb_1">
</div>
</div>
<div id="question_2">
<div class="question">
Question 2
</div>
<div class="table">
<input type="radio" value="1" name="rb_2">
<input type="radio" value="2" name="rb_2">
</div>
</div>
<div id="question_3">
<div class="question">
Question 3
</div>
<div class="table">
<input type="radio" value="1" name="rb_3">
<input type="radio" value="2" name="rb_3">
</div>
</div>
<div id="question_4">
<input type="submit" name="submit">
</div>
</form>
This won't be extremely user friendly as is but does what you asked and gives an idea on approach
Made adjustment to move class="question" to the outer levels where the ID's are. Setting common classes on behavioral elements is typically simpler than targeting ID's
<div id="question_1" class="question">
JS
$(function(){
$('.question :radio').change(function(){
$(this).closest('.question').hide().next().show();
});
});
There are lots of form wizard or form steps type plugins that you could use for this that offer more animation, prev/next buttons and visual step indicators etc
DEMO
Make the default for all divs hidden. When a radio button in a div is clicked, display the next div and hide that one. So in jQuery, use get elements on the divs, and set their display property to none. Store each div into an array of divs. Have a function that activates on click of a radio button. When it is clicked, go to the next div in the array from the radio button div and set its display to block.

Rails: two radio selects on same source list

Wondering how to approach this... Best to look at the picture to visualize the, hopeful, UI for a form for choosing options in a list. Users need to be able to make a first choice and a second choice for each option. One and only one can be selected in each column, and for that matter, each row.
At first I thought, naturally, 2 radio button groups might work...but not sure how? Perhaps hidden radio_buttons whose values are manipulated via Javascript/JQuery in a click event on each div? Event should also check/handle "collisions" when user tries to select same option for both choices.
Or, would this perhaps be better with two hidden collection_selects...or even simpler, just two hidden text_fields...which javascript can populate with the ID of the selected option?
Or maybe I'm overlooking something more obvious.
I'm new(ish) to javascripting with Rails so looking for advice/validation.
Thanks.
I think something like this is what your looking for:
HTML:
<form>
<p class="exclusiveSelection">
Selection One
<input type="radio" name="firstColumn"/>
<input type="radio" name="secondColumn"/>
</p>
<p class="exclusiveSelection">
Selection Two
<input type="radio" name="firstColumn"/>
<input type="radio" name="secondColumn"/>
</p>
<p class="exclusiveSelection">
Selection Three
<input type="radio" name="firstColumn"/>
<input type="radio" name="secondColumn"/>
</p>
<input type="button" id="submitForm" value="Submit">
</form>
JavaScript:
$(function() {
$(".exclusiveSelection input[type='radio']").click(function() {
$exclusiveSelection = $(this).parent();
$('input[type='radio']', $exclusiveSelection).attr('checked', false);
$(this).attr('checked', true);
});
});
It ensures that the values are unique across column and row and works with jQuery 1.2.6 - 1.7.1. There is also a JSFiddle example.
If you need help adapting this for Rails let me know, however it should be straight forward.

radio button show divs on the based on its value

I have a list of radio buttons on the basis of how many id in the mysql table.
when ever clock on the radio then it shows the div details
for example
radio buttons
<input name="value" type="radio" value="facebook" id="facebook"/> facebook
<input name="value" type="radio" value="google_plus" id="google_plus" /> Google plus
<input name="value" type="radio" value="orkut" id="orkut" /> orkut
divs
<div id="facebook" style="display:none;">
facebook is one of the most popular social networking website
</div>
<div id="google" style="display:none;">
google plus is the new social network
</div>
<div id="orkut" style="display:none;">
Orkut is a socila networking website powered by google
</div>
when select radio, I need to show divs on the base value="" value of the radio button.
the thing is that radio numbers and values will be on the base of mysql data
is there any option to show divs in Jquery ?
if u know help me pls
Hope, this piece of code would be of any help. here is my try to find a solution for your problem :)
$('input:radio').click(function(){
var idVal = $(this).val();
$('div').hide();
$('div[id='+idVal+']').show()
});
please find a working sample here: http://jsfiddle.net/u3AbT/3/
from what it seems like you're asking you want to know how to show a div via jquery?
.show() method
or .css() method example: $('nameOfYourDiv').css('display','block');
$('input[name="value"]').change(function(){
var id = $(this).val();
$('#' + id).show();
});

check html checkbox using a button

I'm struggling to find a solution for this anywhere on Google, maybe i'm searching incorrectly but thought I would come and ask the ever trustworthy members of StackOverflow.
I'm wanting to use an html button to check an html check box. There reason I don't want to use the check box will be purely for accessibility reasons because the application i'm developing will be on a terminal and used as via a touch-screen so an HTML check box is too small.
The only issue is that the list of check box's is dynamic as it is populated using an SQL query. Obviously however I can do the same for creating HTML buttons.
Im guessing it will require JavaScript (which I'm perfectly happy using now as I'm finding a lot of the functionality I need in this application needs JavaScript) to do this functionality.
So to clarify: I want to click on a button, say it has a value of "Fin Rot" and that checks the check box with the value "Fin Rot". And then if I clicked another button, say it has a value of "Ich" then it also checks the check box with the value "Ich"
While you can use a button and JavaScript for this, might I suggest a much simpler approach? Just use a <label> that's designed just for this, and style it like a button, for example:
<input type="checkbox" id="finRot" name="something" value="Fin Rot">
<label for="finRot">Some text here, could be "Fin Rot"</label>
or (if you don't want to use id on checkbox and for on label):
<label>
<input type="checkbox" name="something" value="Fin Rot">
Some text here, could be "Fin Rot"
</label>
....then with CSS you can hide the checkbox if needed, but either are clickable to toggle the checkbox.
You can test out a demo here, also showing some button-ish CSS on the label if needed.
This example uses a button to toggle the checkbox on/off.
http://jsfiddle.net/DnEL3/
<input type="checkbox" id="finRot" name="something" value="Fin Rot">
<button onclick="document.getElementById('finRot').checked=!document.getElementById('finRot').checked;">Fin Rot</button>
How about a HTML solution.
<p><input type="checkbox"
value="Another check box"
name="cboxwithlabel" id="idbox"><label
for="idbox">Another
checkbox</label></p>
<label> Creates label for the checkbox or radio buttons.
If you are looking for bootstrap solution, I just created this:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-6">
<!-- Here starts the component -->
<label class="input-group">
<span class="input-group-addon">
<input type="checkbox">
</span>
<span class="form-control btn btn-primary">
Click to toggle checkbox
</span>
</label>
<!-- Here ends the component -->
</div>
</div>
</div>

Categories

Resources