I'm trying to implement a plans page. In this page a user can only select one plan obviously. So I have a form that has radio buttons representing each plan. But Radio buttons are ugly right!? So I'm trying to hide them behind a regular a href styled nicely. Is it possible to have an a href actually select a radio button on it's behalf? Here is my code:
HTML:
<label class="plans__trial__actions">
<input type="radio" id="trial" name="slug" value="trial" />
Select
</label>
So for for the radio button I'm use display: none; to hide the radio button then trying to select that button when a user clicks the a href that below the radio button. How can I achieve this?
You can add a class to all checkbox example check. Looking at the structure of your html, if the input sibling is next to the anchor tag you can add a click event to all anchor.when the event fires, the anchor will check their sibling-checkbox.
Snippet below without the checkbox hidden
all_anchor=document.getElementsByClassName("button");
for(var x=0;x<all_anchor.length;++x){
all_anchor[x].addEventListener("click",function(){
this.previousElementSibling.checked=true;
})
}
a{
padding:30px;
background:red;
border:solid red;
border-radius:10px;
text-decoration:none;
}
<label class="plans__trial__actions">
<input type="radio" id="trial" name="slug1" value="trial" class="check"/>
Select
</label>
<label class="plans__trial__actions">
<input type="radio" id="trial" name="slug2" value="trial" class="check"/>
Select
</label>
<label class="plans__trial__actions">
<input type="radio" id="trial" name="slug3" value="trial" class="check"/>
Select
</label>
Snippet below where all input box are hidden but checked by the anchor tag
all_anchor = document.getElementsByClassName("button");
for (var x = 0; x < all_anchor.length; ++x) {
all_anchor[x].addEventListener("click", function() {
this.previousElementSibling.checked = true;
console.log("input sibling is checked")
})
}
a {
padding: 30px;
background: red;
border: solid red;
border-radius: 10px;
text-decoration: none;
}
.check {
display: none;
}
<label class="plans__trial__actions">
<input type="radio" id="trial" name="slug1" value="trial" class="check"/>
Select
</label>
<label class="plans__trial__actions">
<input type="radio" id="trial" name="slug2" value="trial" class="check"/>
Select
</label>
<label class="plans__trial__actions">
<input type="radio" id="trial" name="slug3" value="trial" class="check"/>
Select
</label>
Related
Is there option for radio button to be auto selected when visitor enter text in another input form? I have searched for it, but without success.
I have this form with 3 radio buttons, they allow users to choose size, last radio button is for custom size (width and height). Under last radio button there is text input to input custom height and width.
<form action="#" method="post">
<label for="original-size">Original
<input type="radio" id="original_size" name="size" value="original" checked="checked">
</label>
<label for="medium-size">Medium
<input type="radio" id="medium-size" name="size" value="medium">
</label>
<label for="custom-size">Custom
<input type="radio" id="custom-size" name="size" value="custom">
</label>
<input id="custom-width" type="number" name="custom-width" placeholder="Custom width">
<label for="custom-width">custom width</label>
and
<input id="custom-height" type="number" name="custom-height" placeholder="Custom height">
<label for="custom-height">custom height</label>
<br>
<button name="submit" type="submit">Submit</button>
</form>
How to select custom-size radio input if user click on custom-width or custom-height text input? Is there option without java script, if not, small code of java script would be fine (I am not using jQuery)?
Managed to dig up this, is this what you are looking for?
<form>
<p>Original: <input type="text"></p>
<p>Medium: <input type="text"></p>
<div id="customWrapper">
<p>Custom: <input type="radio" id="customSize"></p>
<p>Custom Width: <input type="text"></p>
<p>Custom Height: <input type="text"> </p>
</div>
</form>
const div = document.getElementById('customWrapper');
// When the custom width or custom height are clicked on
div.addEventListener('focus', (event) => {
document.getElementById('customSize').checked = true;
}, true);
// When clicked somewhere out of the form
div.addEventListener('blur', (event) => {
document.getElementById('customSize').checked = false;
}, true);
https://jsfiddle.net/mLvt9ubz/
It basically searches for any input inside the div, when it's event changes then something happens.
In this case the radio button with an ID get's the attribute selected.
The Bootstrap tab pane has anchor tag as the tab controls, Instead of tab button look I need radio buttons.
Tried to add the radio buttons content of tag
<div id="tab" class="btn-group" style="width=500px; margin-bottom:20px;">
<a href="#accept" class="radio " data-toggle="tab" style="float: left; margin-right: 20px; text-decoration: none;">
<label>
<input type="radio" value="accept" name="action" />
Accept
</label>
</a>
<a href="#discuss" class="radio" data-toggle="tab" style="float: right; text-decoration: none;">
<label>
<input type="radio" value="discuss" name ="action"/>
Discuss
</label>
</a>
</div>
When a user clicks on the radio button a jquery script will trigger the tabs clicks, this works fine
$("input:radio").click(function(event) {
$(event.target).parents('a').trigger('click');
event.stopPropagation();
});
the whole code Js fiddle link
Issue
When a user click on the Label, tabs are selecting respectively but the radio button still in previous selections
The ways I tried to solve.
1. Added CSS pointer-events: none; this will affect radio also.
2. Script to check a radio button. this action call other js events
What I need.
A user only able to click the radio button, not tabs label part
OR
When User clicks on Tabs label, check the radio appropriate.
Code Snippet
Thank in advance
Here is the code to check the radio appropriate.
$("input:radio").click(function() {
$("#result").html($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="tab" class="btn-group" style="width=500px; margin-bottom:20px;">
<a href="#accept" class="radio " data-toggle="tab" style="float: left; margin-right: 20px; text-decoration: none;">
<label>
<input type="radio" value="accept" name="action" />
Accept
</label>
</a>
<a href="#discuss" class="radio" data-toggle="tab" style="float: right; text-decoration: none;">
<label>
<input type="radio" value="discuss" name ="action"/>
Discuss
</label>
</a>
</div>
<div id="result"></div>
Hope this helps !
Im trying to make tabs with showing options. like:
showing options
Show for all
Hide for all
Show for specific
Hide for specific
these are the tabs and also these are radio select buttons
(looks like radio button but on check switchs to it's tab content)
And every tab content has it's own checkbox select list (except "show for all" and "Hide for all")
But, on showing option change inner content of all other tabs needs to be unchecked
Foundation 6, Jquery, CSS
The aim of this question is to use it a form, so you can select item showing options, and according to your select there will be available items for showing.
FORM.HTML
<div class="row">
<div class="medium-12 columns">
<ul class="clear-list">
<li>
<label class="select-label">
<input name="module_show_option" type="radio" value="all" checked>
Show on all pages
</label>
</li>
<li>
<label class="select-label">
<input name="module_show_option" type="radio" value="none">
Don't show on any page
</label>
</li>
<li>
<label class="select-label">
<input name="module_show_option" type="radio" value="selected">
Show only on selected
</label>
</li>
<li>
<label class="select-label">
<input name="module_show_option" type="radio" value="except">
Show on all except selected
</label>
</li>
</ul>
<script>
$(document).ready(function () {
$("input[name=module_show_option]:radio").click(function () { // attack a click event on all radio buttons with name 'radiogroup'
if ($(this).val() == 'all') {
$("input[name=module_menu_item_id]:checkbox").attr("disabled", "disabled");
} else if ($(this).val() == 'none') {
$("input[name=module_menu_item_id]:checkbox").attr("disabled", "disabled");
} else if ($(this).val() == 'selected') { //check which radio button is clicked
$("input[name=module_menu_item_id]:checkbox").removeAttr("disabled");
} else if ($(this).val() == 'except') { //check which radio button is clicked
$("input[name=module_menu_item_id]:checkbox").removeAttr("disabled");
}
});
});
</script>
</div>
</div>
<div class="row">
<div class="medium-12 columns">
<label>
<input type="checkbox" name="module_menu_item_id" value="1">
</label>
<label>
<input type="checkbox" name="module_menu_item_id" value="2">
</label>
<label>
<input type="checkbox" name="module_menu_item_id" value="3">
</label>
<label>
<input type="checkbox" name="module_menu_item_id" value="4">
</label>
<label>
<input type="checkbox" name="module_menu_item_id" value="4">
</label>
</div>
</div>
As you can see I've rejected idea of tabbing content, instead I used disabling input fields, so it will disable checked items from pasting in POST body, and also it will preserve them from losing while you can chenge your decision
want to remove radio button class false if parent div class s1 found.
<div class="s1">
<span>
<input name="question0" checked type="radio" value="C" class="false">
</span>
</div>
my script
$('.s1:has(input:radio:checked)').removeClass('false');
You can simple selector, nothing special is required.
$('.s1 :radio').removeClass('false');
jQuery(function($) {
$('.s1 :radio').removeClass('false');
});
.false {
background-color: blue;
height: 50px;
width: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="s1">
<span>
<input name="question0" checked type="radio" value="C" class="false">
</span>
</div>
<div class="s2">
<span>
<input name="question0" checked type="radio" value="C" class="false">
</span>
</div>
try this for just radio whether checked or not
$(".s1 input[type='radio']").removeClass('false');
And this one for only checked radio
$(".s1 input[type='radio']:checked").removeClass('false');
If the only reason is to alter the way the radio buttons looks, using jQuery is not really the normal way.
Here is an example without using jQuery, it's just been targeted in CSS instead.
.s2 .false {
height: 50px;
width: 100px;
}
<div class="s1">
<input name="question0"
checked type="radio"
value="C"
class="false">
</div>
<div class="s2">
<input name="question0"
checked
type="radio"
value="C"
class="false">
</div>
I am looking for a font picker tool to use in my web project which should allow users to choose any of the fonts listed. I have created a small code with radio button, which actually works:
<label style="font-family: Courier;">
<input type="radio" name="font" value="Courier" />Courier</label>
<label style="font-family: Verdana;">
<input type="radio" name="font" value="Verdana" />Verdana</label>
<label style="font-family: Arial;">
<input type="radio" name="font" value="Arial" />Arial</label>
<label style="font-family: Papyrus;">
<input type="radio" name="font" value="Papyrus" />Papyrus</label>
<label style="font-family: Monotype Corsiva;">
<input type="radio" name="font" value="Monotype Corsiva" />Monotype Corsiva</label>
I need to categorise these fonts before displaying. This can be done by using two main radio buttons "font1" and "font2". When the user checks the "font1" radio button some fonts should be displayed and when user checks "font1" radio button some other fonts should be displayed. Is there a way to do this?
OR
Alternative solution for this could be creating fonts database similar to flametext and cooltext.com. Is there any way to design this type of font picker tool?
I have used your code but still its not working it will just create groups but does not hide "subradio" button all the radio button are displyed in a table ,thats it.... but its not hiding.. i guess the function is not working...
Show font group 1 Show font group 2
<fieldset class="groups" id="fonts_group_1" style="dispaly:none">
<label style="font-family: Courier;">
<input type="radio" name="font" value="Courier" />Courier</label>
<label style="font-family: Verdana;">
<input type="radio" name="font" value="Verdana" />Verdana</label>
</fieldset>
<fieldset class="groups" id="fonts_group_2" style="dispaly:none">
<label style="font-family: Arial;">
<input type="radio" name="font" value="Arial" />Arial</label>
<label style="font-family: Papyrus;">
<input type="radio" name="font" value="Papyrus" />Papyrus</label>
</fieldset>
<script type="text/javascript">
$(function() {
$('a#fonts_group_1b').click(function() {
$('.groups').hide();
$('#fonts_group_1').show();
}
$('a#fonts_group_2b').click(function() {
$('.groups').hide();
$('#fonts_group_2').show();
}
});
</script>
One of these should lead you down the right path.
http://www.queness.com/post/212/10-jquery-and-non-jquery-javascript-rich-text-editors
http://www.webdesignerdepot.com/2008/12/20-excellent-free-rich-text-editors/
How about something like this? You can refactor the HTML to use radio buttons if you would rather.
http://www.fullfatcode.com/2011/04/10/jquery-font-selector-version-2/
Here is a demo of it.
http://www.fullfatcode.com/examples/jqfontselector/
Try to group radio buttons into fieldsets:
<fieldset id="fonts_group_1" style="dispaly:none">
//your radiobuttons
</fieldset>
<fieldset id="fonts_group_2" style="dispaly:none">
//your radiobuttons
</fieldset>
And you can use $('#fonts_group_1').show(); in proper jquery script (for example in case when other radiobutton is checked).
--edit:
Here is complete code for you:
HTML:
Show font group 1 Show font group 2
<fieldset class="groups" id="fonts_group_1" style="dispaly:none">
<label style="font-family: Courier;">
<input type="radio" name="font" value="Courier"/>Courier</label>
<label style="font-family: Verdana;">
<input type="radio" name="font" value="Verdana"/>Verdana</label>
</fieldset>
<fieldset class="groups" id="fonts_group_2" style="dispaly:none">
<label style="font-family: Arial;">
<input type="radio" name="font" value="Arial"/>Arial</label>
<label style="font-family: Papyrus;">
<input type="radio" name="font" value="Papyrus"/>Papyrus</label>
</fieldset>
Script:
$(function() {
$('a#fonts_group_1b').click(function() {
$('.groups').hide();
$('#fonts_group_1').show();
});
$('a#fonts_group_2b').click(function() {
$('.groups').hide();
$('#fonts_group_2').show();
});
});