clickable buttons instead of radio buttons - javascript

I want click able buttons instead of radio buttons. I saw an example on jsfiddle but only problem is I don't have labels tags in my code. I don't have access to code, so I cant add them either. I can only add javascript and css to my CMS. Is there any way to achieve results?
<div class="button1">
<input type="radio" checked="" value="1" name="question">question 1
</div>
<div class="button2">
<input type="radio" value="2" name="question">question 2
</div>
I got solution here but its not working in IE.
$(function() {
$('.container input[type="radio"]').each(function(index) {
console.log($(this));
$(this).attr('id', 'radio' + index);
var label = $('<label />', {'for': 'radio' + index}).html($(this).parent().html());
$(this).parent().empty().append(label);
});
$('label').click(function () {
$('label').removeClass('selected');
$(this).addClass('selected');
});
});

To get this functionality, you have to wrap your inputs (and the description) in a label. Assuming that your radio is always in a seperate container, this is possible with this piece of code:
$('.container input[type="radio"]').each(function(index) {
console.log($(this));
$(this).attr('id', 'radio' + index);
var label = $('<label />', {'for': 'radio' + index}).html($(this).parent().html());
$(this).parent().empty().append(label);
});
working jsfiddle: http://jsfiddle.net/VyvpP/

If, what I think you're asking is that you have a radio button in the guise of a clickable button, this should do you:
-webkit-appearance:none
http://jsfiddle.net/54ek6/
You can hide the radio button with -webkit-appearance:none; and using :before psuedo classes, add in the labels.
This does not work on IE. (Just so you know!)

if you want something like this:
just copy and paste:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>
<script>
$(document).ready(function(){
$("#rad").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<input type="radio" checked="" value="1" name="question" id="rad">
</body>
</html>

Related

Dynamic Checkbox selector in jquery

I have a series of dyanmic checkboxes which are creating at runtime but with differnt Ids like this (patter is same)
ModellingTagID_1201
ModellingTagID_1202
ModellingTagID_1203
ModellingTagID_1204
I want to know that above check box change or not? how can i make a dyanmic event with dynamic selector? so that i can get that particular checkbox value has changed? is this kind of thing possible?
$jqLib("#ModellingTagID_*").change(function(){
var lastState =$jqLib("#ModellingTagAlternativePlanning").prop("disabled");
$jqLib("#ModellingTagAlternativePlanning").prop("disabled",!lastState);
});
you can apply same class to all those checkboxes
<li><input type="checkbox" id="yourcbid1" name="x" value="1" class="yourcbclass" /> cb1</li>
<li><input type="checkbox" id="yourcbid2" name="x" value="1" class="yourcbclass" /> cb2</li>
and then you can make function for it's change event like this.
$(function(){
$('.yourcbclass').on('change', function() {
if($(this).is(':checked'))
{
//do your stuff here
}
});
});
see if this helps..
Very simple using this way:--
$("#envoyer").click(function(e) {
var myArray = [];
$(":checkbox:checked").each(function() {
myArray.push(this.value);
});
if(myArray == ''){
alert('Please check');
}else{
alert("Checked: " + myArray.join(","));
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
one<input type="checkbox" name='checkbox0' value="one_name" checked>
two<input type="checkbox" name='checkbox1' value="one_name1">
three<input type="checkbox" name='checkbox2' value="one_name2">
<input type="button" id="envoyer" value="Envoyer Reponse" />
</body>
</html>
From what I understand, your issue is to distinguish the unique id of the checkbox, which is being, changed. To achieve this, you can simply add a common class to all the elements, alongwith unique random ids.
cb_1<input type="checkbox" class="someclass" id='ModellingTagID_1201' value="value_1" checked>
cb_2<input type="checkbox" class="someclass" id='ModellingTagID_1202' value="value_2">
cb_3<input type="checkbox" class="someclass" id='ModellingTagID_1203' value="value_3">
And then you can simply bind a change event listener to the common class, and fetch the value of the random id, which has been changed, from inside the event listener.
$(document).ready(function(){
$('.someclass').on('change', function() {
alert($(this).attr("id"));
});
});

javascript iterating array of objects using checkboxes

I want to show div when checkboxis true and hide div when checkbox is false. For this reason I have created an array of objects, which have property(checkboxes and divs) and value(selectors of checkboxes and divs). But this code doesn't work. Where have I done a mistake?
https://jsfiddle.net/9LzLm9hx/9/
just change .attr("checked") to .is(":checked")
I don't understand why you give this useless piece of code:
<label for="common"></label> <span>Common</span>
Can be made useful this way:
<label for="common"> <span>Common</span></label>
And to solve your issue, rename the id of the checkboxes to match the class of the divs:
<input type="checkbox" id="post-id" />
<input type="checkbox" id="post-activation" />
And the <div>s:
<div class='col-xs-3 post-id'>id</div>
<div class='col-xs-3 post-activation'>active</div>
Then using jQuery:
$(function () {
$("input:checkbox").change(function () {
if (this.checked)
$("." + this.id).show();
else
$("." + this.id).hide();
});
});

jQuery multiple id sets multiple patterns

OK, sure this is really simple, but I'm new to Java / jQuery so all help knowledge is greatly appreciated!
I have three sets of information, but i want each set to behave the same way, when I check a box, I want a certain div to appear, then disappear when the checkbox is unchecked...
Started with this, and it works...
//Set 1 #mod_1 toggles #sec_mod_1..
$('#sec_mod_1').change(function() {
$('#mod_1').toggle(this.checked);
}).change();
//Set 2
$('#sec_mod_2').change(function() {
$('#mod_2').toggle(this.checked);
}).change();
//Set 3
$('#sec_mod_3').change(function() {
$('#mod_3').toggle(this.checked);
}).change();
Now this is a little long winded, and I know there has to be a shorter way... Thinking something like this...
$('[id^="sec_mod_"]').change(function() {
$('[id^="mod_"]').toggle(this.checked);
}).change();
However, I don't know how to make this function for each separate set, was thinking the "this" keyword...?
Like I said all help would be greatly appreciated...
Use a simple class selector:
$('.trigger').change(function() {
var $checkbox = $(this);
var id = $checkbox.attr('id'); // eg. sec_mod_1
var numb = id.substring(id.lastIndexOf('_') + 1); // eg. 1
$('#mod_' + numb).toggle(this.checked); // toggle #mod_1
}).change();
Add trigger as the class to the elements that needs this functionality.
Working jsfiddle
You may use:
$('#mode_' + this.id.replace('sec_mod_', ''), this).toggle(this.checked);
You can use use the same markup with a handler like
$('input[id^="sec_mod_"]').change(function() {
console.log('d')
$('#mode_' + this.id.replace('sec_mod_', '')).toggle(this.checked);
}).change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id="sec_mod_1" type="checkbox" />
<div id="mode_1">1</div>
<input id="sec_mod_2" type="checkbox" />
<div id="mode_2">2</div>
<input id="sec_mod_3" type="checkbox" />
<div id="mode_3">3</div>
Or if you can change the markup
$('.sec_mod').change(function() {
$($(this).data('target')).toggle(this.checked);
}).change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id="sec_mod_1" class="sec_mod" type="checkbox" data-target="#mode_1" />
<div id="mode_1">1</div>
<input id="sec_mod_2" class="sec_mod" type="checkbox" data-target="#mode_2" />
<div id="mode_2">2</div>
<input id="sec_mod_3" class="sec_mod" type="checkbox" data-target="#mode_3" />
<div id="mode_3">3</div>

hide/show of a div on selection of radio button

this is my html code
<div class="wrapper"> <strong>Space portion</strong>
<br />
<input type="radio" name="rdSpace" value="RJ" />Space 1
<br />
<input type="radio" name="rdSpace" value="SM" />Space 2
<br />
<br />
</div>
<div class="wrapper"> <strong> Template</strong>
<br />
<input type="radio" name="rdTemplate" value="uploadTemplate" />Upload your own file
<label class="cabinet">
<input style="margin-left:10px;" type="file" name="user_upload_template"
class="uploader" id="file">
<br />
<input type="radio" name="rdTemplate" value="preExisting" />Choose below
<div id="RJ" class="tempDisp">Div 1 Preview</div>
<div id="SM" class="tempDisp">Div 2 Preview</div>
this is jquery code
$(document).ready(function () {
$("div.tempDisp").hide();
$('[id="' + $(":radio:checked").val() + '"]').show();
$('input[name="rdSpace"]:radio,input[name="rdTemplate"]').click(function () {
$("div.tempDisp").fadeOut('slow');
$('[id="' + $(this).val() + '"]').fadeIn('slow');
});
});
the purpose of jquery code is to display "Div 1 Preview" on selection of "Space 1" radio and to display "Div 2 Preview" on selection of "Space 2" radio.. till now it is working fine
now I tried to add the functionality of hiding "Div 1 Preview" and "Div 2 Preview" on selection of "Upload your own file" radio.. I got success and on selection of said button those are hiding.. but the problem is that they are not displayed back when I click back "Choose below" radio.. why??
here is the fiddle
http://jsfiddle.net/bTM66/
Try this:
$(document).ready(function () {
$("div.tempDisp").hide();
$('[id="' + $(":radio:checked").val() + '"]').show();
$('input[name="rdSpace"]:radio,input[name="rdTemplate"]').change(function () {
$("div.tempDisp").fadeOut('slow');
if ($(this).val() === "preExisting") {
$(":radio:checked:first").change();
} else {
if(!$('input[value="uploadTemplate"]').is(':checked')){
$('[id="' + $(this).val() + '"]').fadeIn('slow');
}
}
});
});
See Sample Fiddle
what your code is doing..
$('input[name="rdSpace"]:radio,input[name="rdTemplate"]').click(function () { == when clicked, on radio with given selector
$("div.tempDisp").fadeOut('slow'); == div with class tempDisp fade out slow
$('[id="' + $(this).val() + '"]').fadeIn('slow'); == the div with id (selected radio val) show
the problem
on click Upload your own file the current value is uploadTemplate and jquery will not be able to find div with id = uploadTemplate . so nothing happens.
onclick Choose below same thing.. current value is preExisting and again it will not find div with id=preExisting. so nothing happens again
the work around
$(document).ready(function () {
$("div.tempDisp").hide();
$('[id="' + $(":radio:checked").val() + '"]').show();
$('input[name="rdSpace"]:radio,input[name="rdTemplate"]').click(function () {
$("div.tempDisp").fadeOut('slow');
$('[id="' + $(this).val() + '"]').fadeIn('slow');
if($(this).val()=="preExisting"){ //here check if value is preExistig
$('#'+ $('input[name="rdSpace"]:checked').val()).fadeIn('slow');
//$('#RJ,#SM').fadeIn('slow'); //if yes show the div you wanted which is RJ,SM
}
});
});
update
replace
$('#RJ,#SM').fadeIn('slow');
with
$('#'+ $('input[name="rdSpace"]:checked').val()).fadeIn('slow');
updated working fiddle
So to get one or none of the two divs showing depending on the two separate values.
The click event is bound to both sets of radio buttons, so you can't use $(this) to get the value of the checked one to pick an ID to show, you need to specify which radio button selection it's from by its name.
You also need to check which of the other selection (browser/pick) is checked and show or not show.
And use on change instead of click so you don't get unnecessary fadeout/fadein.
And I would add style="display:none" to the divs .tempDisp so they are already hidden on load without js.
Working jsfiddle
$(document).ready(function () {
$('input[name="rdSpace"]:radio,input[name="rdTemplate"]').on('change', function () {
$("div.tempDisp").fadeOut('slow');
if ($('input[name="rdTemplate"]:checked').val()=='preExisting'){
$('[id="' + $('input[name="rdSpace"]:checked').val() + '"]').fadeIn('slow');
}
})
});
Set this one to checked so the decision to show can be made on the user changing the first selection.
<input type="radio" name="rdTemplate" value="preExisting" checked="checked" />

Show element with attribute

<input type="radio" name="group2" test="one" value="Water"> Water
<input type="radio" name="group2" test="two" value="Beer"> Beer<br>
<div style="display: none" test="one">aaaaaaa</div>
<div style="display: none" test="two">bbbbbbb</div>
<div style="display: none" test="one">ccccccc</div>
I would like: if i click on radio Water with attribute test="one" then should show me all div with attribute test="one". How can i make it with jQuery?
LIVE: http://jsfiddle.net/hRCXV/
Try this:
$("input[type='radio']").click(function() {
var test = $(this).attr("test");
$("div[test]").hide();
$("div[test='" + test + "']").show();
});
Updated fiddle
Please bear in mind that creating your own attributes as you have here is not valid. If you're using HTML5 you should consider using the data attribute to store whatever information you need associated with each element.
Attach a label to the Water text, and a click handler using the attribute selector:
<label for="option1">
<input type="radio" name="group2" id="option1" test="one" value="Water"> Water
</label>
<script>
$('label').click(function() {
// Logic tells me that you want to only show the test elements whose
// attribute matches the selected radio element; Hide the previous ones:
$('div[test]').hide();
// Get test value:
var test = $('#' + $(this).attr('for') ).attr('test');
$('div[test="' + test + '"]').show();
});
</script>
$('input [value="Water"]').click(function() {
$('[test="one"]').show();
});
jsFiddle: http://jsfiddle.net/hRCXV/1/
$("input[type=radio][value=Water]").click(function()
{
$("[test=one]").show();
});​
I belive this is something that you are looking for?
​$(':radio[name="group2"]')​.click(function(e){
var test = $(this).attr('test');
$('div[test]').hide();
$('div[test='+test+']').show();
});​
try this
jQuery(document).ready(function(){
var yourAttributeName = 'test';
var allDivs = jQuery('div['+yourAttributeName+']');
jQuery('input['+yourAttributeName+']').click(function(){
allDivs.hide().filter('[' + yourAttributeName + '=' + jQuery(this).attr(yourAttributeName) + ']').show();
})
//check the init checked
.filter(':checked')
//and fire click event to filter
.click();
});

Categories

Resources