Default radio button option with jquery

Default radio button option with jquery - javascript

I am trying to hide/show different divs using the method shown here.
<style>
.box{
color: #fff;
padding: 20px;
display: none;
margin-top: 20px;
}
.red{ background: #ff0000; }
.green{ background: #228B22; }
.blue{ background: #0000ff; }
label{ margin-right: 15px; }
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
$('input[type="radio"]').click(function(){
var inputValue = $(this).attr("value");
var targetBox = $("." + inputValue);
$(".box").not(targetBox).hide();
$(targetBox).show();
});
});
</script>
</head>
<body>
<div>
<label><input type="radio" name="colorRadio" value="red" checked = "checked"> red</label>
<label><input type="radio" name="colorRadio" value="green"> green</label>
<label><input type="radio" name="colorRadio" value="blue"> blue</label>
</div>
<div class="red box">You have selected <strong>red radio button</strong> so i am here</div>
<div class="green box">You have selected <strong>green radio button</strong> so i am here</div>
<div class="blue box">You have selected <strong>blue radio button</strong> so i am here</div>
</body>
I would like to have the red button clicked by default when the page loads. However if I just change the label to this:
<label><input type="radio" name="colorRadio" value="red" checked = "checked"> red</label>
It shows as clicked:
but I have to click it again to actually load the red div:
Is there an elegant way to fix that so it is showing the red div when the page loads?
Thanks a lot,
Alex

How about just adding the $('.red').show() to set which box should be shown as default?
$(document).ready(function () {
$('input[type="radio"]').click(function () {
var inputValue = $(this).attr('value');
var targetBox = $('.' + inputValue);
$('.box').not(targetBox).hide();
$(targetBox).show();
});
$('.red').show();
});
.box {
color: #fff;
padding: 20px;
display: none;
margin-top: 20px;
}
.red {
background: #ff0000;
}
.green {
background: #228b22;
}
.blue {
background: #0000ff;
}
label {
margin-right: 15px;
}
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<body>
<div>
<label><input type="radio" name="colorRadio" value="red" checked> red</label>
<label><input type="radio" name="colorRadio" value="green"> green</label>
<label><input type="radio" name="colorRadio" value="blue"> blue</label>
</div>
<div class="red box">You have selected <strong>red radio button</strong> so i am here</div>
<div class="green box">You have selected <strong>green radio button</strong> so i am here</div>
<div class="blue box">You have selected <strong>blue radio button</strong> so i am here</div>
</body>

Related

How to only allow "checking" of only one checkbox

How can I edit this codepen to allow for only checking one item, and if another item is checked, the previous one is unchecked and to use a custom image for the check instead of the current check automatically generated?
<!-- Example Dropdown -->
<div class="dropdown">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">Menu</button>
<div class="dropdown-menu">
Item 1
Item 2
Item 3
</div>
</div>
<p class="mt-4">
View the original post
</p>
<p>
This code is by #claviska and has been released into the public domain.
</p>
.dropdown-item-checked::before {
position: absolute;
left: .4rem;
content: '✓';
font-weight: 600;
}
body {
padding: 1rem;
}
// Toggle checkmarks
$(document).on('click', '.dropdown-item', function(event) {
event.preventDefault();
$(this).toggleClass('dropdown-item-checked');
});

I don't see why hiding radio button would be a problem (I don't mean for accessibility, I only mean for what you want to achieve).
Is that what you want?
[name=items] {
display: none;
}
label {
display: block;
padding-left: 1rem;
}
:checked + label::before {
position: absolute;
left: .4rem;
content: '✓';
font-weight: 600;
}
<input type="radio" name="items" id="item-1">
<label for="item-1">Item 1</label>
<input type="radio" name="items" id="item-2" checked>
<label for="item-2">Item 2</label>
<input type="radio" name="items" id="item-3">
<label for="item-3">Item 3</label>

Toggle CSS class depending on the radio button status

I'm working on a better user interface and I tried to achieve a way to visualize radio buttons. I got the following code to the point where the radio button input will be checked and the class highlightedBox added on color click.
How can I manage to toggle the class highlightedBox depending on the radio button status? Now toggle get triggered on click but this solution wont work if the user decides to deselect the color button by selecting another color.
I know the current status of the code only works for a single change per color. If you want to select the same color again the checked value wont be set. But this is another problem and I'll try to fix this later on.
$('#wireColorSelect #wireBox').click(function(){
var checkbox = $(this).parent().find(".cbox");
var wireDOM = $(this).parent().find("#wireBox");
checkbox.attr('checked', !checkbox.attr('checked'));
wireDOM.toggleClass('highlightedBox');
});
.wireBox{
border: 1px solid;
height:50px;
width:50px;
opacity: 0.5;
}
.white{
background-color: White;
}
.red{
background-color: red;
}
.blue{
background-color: blue;
}
.yellow{
background-color: yellow;
}
.highlightedBox {
opacity: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wireColorSelect">
<div class="flex-row flex-xs-3">
<div class="flex-xs-3 no-padding">
<div id="wireBox" class=" white wireBox"></div>
<input class="cbox" type="radio" id="whiteWireBox" name="wireBox" value="whiteWireBox" />
</div>
<div class="flex-xs-3 no-padding">
<div id="wireBox" class="red wireBox"></div>
<input class="cbox" type="radio" id="redWireBox" name="wireBox" value="redWireBox" />
</div>
<div class="flex-xs-3 no-padding">
<div id="wireBox" class="yellow wireBox"></div>
<input class="cbox" type="radio" id="yellowWireBox" name="wireBox" value="yellowWireBox" />
</div>
<div class="flex-xs-3 no-padding">
<div id="wireBox" class="blue wireBox"></div>
<input class="cbox" type="radio" id="blueWireBox" name="wireBox" value="blueWireBox" />
</div>
</div>
</div>

You can use .not() to exclude element i.e : div which is not currently clicked by user and removeClass from them .
Demo Code :
$('#wireColorSelect .wireBox').click(function() {
var checkbox = $(this).parent().find(".cbox");
var wireDOM = $(this)
checkbox.prop('checked', checkbox.is(":checked") ? false : true);
wireDOM.toggleClass('highlightedBox');
//remove checked from other checkboxes
$(".cbox").not(checkbox).prop('checked', false);
//remove highlight class from other
$(".wireBox").not(wireDOM).removeClass("highlightedBox")
});
.wireBox {
border: 1px solid;
height: 50px;
width: 50px;
opacity: 0.5;
}
.white {
background-color: White;
}
.red {
background-color: red;
}
.blue {
background-color: blue;
}
.yellow {
background-color: yellow;
}
.highlightedBox {
opacity: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wireColorSelect">
<div class="flex-row flex-xs-3">
<div class="flex-xs-3 no-padding">
<div class=" white wireBox"></div>
<input class="cbox" type="radio" id="whiteWireBox" name="wireBox" value="whiteWireBox" />
</div>
<div class="flex-xs-3 no-padding">
<div class="red wireBox"></div>
<input class="cbox" type="radio" id="redWireBox" name="wireBox" value="redWireBox" />
</div>
<div class="flex-xs-3 no-padding">
<div class="yellow wireBox"></div>
<input class="cbox" type="radio" id="yellowWireBox" name="wireBox" value="yellowWireBox" />
</div>
<div class="flex-xs-3 no-padding">
<div class="blue wireBox"></div>
<input class="cbox" type="radio" id="blueWireBox" name="wireBox" value="blueWireBox" />
</div>
</div>
</div>

jQuery and HTML - clicking on current div box id to display sub dvi box content

This is a my jQuery and HTML code.
my goal is when I click on the current box1, box2 or box3 , I want to display current sub box.
For example : when I click on current box1 should be open current sub_box_1, and so. I did some jQuery code but I can't get result.
Thanks!
$(document).ready(function() {
$('.sub_box').hide();
$('.box').click(function() {
$(this).$('#sub_box_1').show();
});
});
.box {
width: 150px;
height: 150px;
float: left;
margin-left: 20px;
border: 1px solid #333;
margin-top: 10px;
}
.sub_box {
width: 150px;
height: 150px;
border: 1px solid #09c;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<html>
<head>
</head>
<body>
<div id="wrapp">
<div id="1" class="box">
<b>Box 1</b>
<div id="sub_box_1" class="sub_box">
<input type="text" name="user_name" placeholder='User Name' />
<button>ADD</button>
</div>
<!--sub_box_1-->
</div>
<!--1-->
<div id="2" class="box">
<b>Box 2</b>
<div id="sub_box_2" class="sub_box">
<input type="text" name="user_email" placeholder='User Email' />
<button>ADD</button>
</div>
<!--sub_box_2-->
</div>
<!--2-->
<div id="3" class="box">
<b>Box 3</b>
<div id="sub_box_3" class="sub_box">
<input type="text" name="user_phone" placeholder='User Phone' />
<button>ADD</button>
</div>
<!--sub_box_3-->
</div>
<!--3-->
</div>
<!--wrapp-->
</body>
</html>

Try using this:
$(document).ready(function() {
$('.sub_box').hide();
$('.box').click(function() {
$(this).children('.sub_box').show();
});
});
jsfiddle example: https://jsfiddle.net/d6zf0n1b/

When you are using $(this).$('#sub_box_1'). you are trying to execute the $ function of the return of $(this). There is no $ function of $(this). Hence you are getting an error.
The other problem is that you are trying to access by the "#" accessor which matches the id not the class.
So this is why Andre's answer works. He is starting from the box that was clicked and looking for immediate children that have the class "sub_box".
One thing to keep in mind is that the children method will only search one level down from the parent. If the box could be deeper down, you should use the 'find' method.

You can use the jQuery find method (https://api.jquery.com/find/), which will find elements inside the the element matching the selector you use, try this:
$(document).ready(function() {
$('.sub_box').hide();
$('.box').click(function() {
$(this).find('.sub_box').show();
});
});
.box {
width: 150px;
height: 150px;
float: left;
margin-left: 20px;
border: 1px solid #333;
margin-top: 10px;
}
.sub_box {
width: 150px;
height: 150px;
border: 1px solid #09c;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<html>
<head>
</head>
<body>
<div id="wrapp">
<div id="1" class="box">
<b>Box 1</b>
<div id="sub_box_1" class="sub_box">
<input type="text" name="user_name" placeholder='User Name' />
<button>ADD</button>
</div>
<!--sub_box_1-->
</div>
<!--1-->
<div id="2" class="box">
<b>Box 2</b>
<div id="sub_box_2" class="sub_box">
<input type="text" name="user_email" placeholder='User Email' />
<button>ADD</button>
</div>
<!--sub_box_2-->
</div>
<!--2-->
<div id="3" class="box">
<b>Box 3</b>
<div id="sub_box_3" class="sub_box">
<input type="text" name="user_phone" placeholder='User Phone' />
<button>ADD</button>
</div>
<!--sub_box_3-->
</div>
<!--3-->
</div>
<!--wrapp-->
</body>
</html>

How can I add event if multple checkboxes are checked?

https://jsfiddle.net/rsu1cjss/7/
I want show div (only this one)
<div class="two-colors box">You have selected <strong>two colors</strong> so i am here</div>
If red and green is checked
JS
$('input[type="checkbox"]').click(function(){
if($(this).attr("value")=="red"){
$(".red").toggle();
}
if($(this).attr("value")=="green"){
$(".green").toggle();
}
if($(this).attr("value")=="blue"){
$(".blue").toggle();
}
if($(this).attr("value")=="yellow"){
$(".yellow").toggle();
}
});
HTML
<div>
<label><input type="checkbox" name="colorCheckbox" value="red"> red</label>
<label><input type="checkbox" name="colorCheckbox" value="green"> green</label>
<label><input type="checkbox" name="colorCheckbox" value="blue"> blue</label>
<label><input type="checkbox" name="colorCheckbox" value="yellow"> yellow</label>
</div>
<div class="red box">You have selected <strong>red checkbox</strong> so i am here</div>
<div class="green box">You have selected <strong>green checkbox</strong> so i am here</div>
<div class="blue box">You have selected <strong>blue checkbox</strong> so i am here</div>
<div class="yellow box">You have selected <strong>blue checkbox</strong> so i am here</div>
<div class="two-colors box">You have selected <strong>two colors</strong> so i am here</div>
CSS
.box{
padding: 20px;
display: none;
margin-top: 20px;
border: 1px solid #000;
}
.red{ background: #ff0000; }
.green{ background: #00ff00; }
.blue{ background: #0000ff; }
.yellow{ background: yellow; }
.two-colors {background: pink}

In response to the click, check the checked properties on the red and green checkboxes, and only show the div if they're both true:
$('input[type="checkbox"]').click(function(){
var red = $("input[type=checkbox][value=red]")[0];
var green = $("input[type=checkbox][value=green]")[0];
$(".two-colors.box").toggle(red.checked && green.checked);
// ...
});
Note that the single-div conditions in that code are also wrong: The checkbox's value is always going to be "blue", "yellow", etc.; what changes is whether the checkbox is checked. So you can use the value (this.value) to look up the div to show, and the checked property for the argument to toggle:
$("." + this.value).toggle(this.checked);
So:
$('input[type="checkbox"]').click(function(){
// Handle the combined one
var red = $("input[type=checkbox][value=red]")[0];
var green = $("input[type=checkbox][value=green]")[0];
$(".two-colors.box").toggle(red.checked && green.checked);
// Handle the singles:
$("." + this.value).toggle(this.checked);
});
(Note that with input elements, in general $(this).attr("value") is incorrect for checking the value; use $(this).val() or just this.value as there's nothing special we need jQuery for in this case. The value attribute and the value property are not the same thing for input elements.)
Live Example:
$('input[type="checkbox"]').click(function() {
// Handle the combined one
var red = $("input[type=checkbox][value=red]")[0];
var green = $("input[type=checkbox][value=green]")[0];
$(".two-colors.box").toggle(red.checked && green.checked);
// Handle the singles:
$("." + this.value).toggle(this.checked);
});
.box {
padding: 20px;
display: none;
margin-top: 20px;
border: 1px solid #000;
}
.red {
background: #ff0000;
}
.green {
background: #00ff00;
}
.blue {
background: #0000ff;
}
.yellow {
background: yellow;
}
.two-colors {
background: pink
}
<div>
<label>
<input type="checkbox" name="colorCheckbox" value="red">red</label>
<label>
<input type="checkbox" name="colorCheckbox" value="green">green</label>
<label>
<input type="checkbox" name="colorCheckbox" value="blue">blue</label>
<label>
<input type="checkbox" name="colorCheckbox" value="yellow">yellow</label>
</div>
<div class="red box">You have selected <strong>red checkbox</strong> so i am here</div>
<div class="green box">You have selected <strong>green checkbox</strong> so i am here</div>
<div class="blue box">You have selected <strong>blue checkbox</strong> so i am here</div>
<div class="yellow box">You have selected <strong>blue checkbox</strong> so i am here</div>
<div class="two-colors box">You have selected <strong>two colors</strong> so i am here</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Or with more jQuery: ;-)
$('input[type="checkbox"]').click(function(){
// Handle the combined one
var redChecked = $("input[type=checkbox][value=red]").is(":checked");
var greenChecked = $("input[type=checkbox][value=green]").is(":checked");
$(".two-colors.box").toggle(redChecked && greenChecked);
// Handle the singles:
var $this = $(this);
$("." + $this.val()).toggle($this.is(":checked"));
});
$('input[type="checkbox"]').click(function(){
// Handle the combined one
var redChecked = $("input[type=checkbox][value=red]").is(":checked");
var greenChecked = $("input[type=checkbox][value=green]").is(":checked");
$(".two-colors.box").toggle(redChecked && greenChecked);
// Handle the singles:
var $this = $(this);
$("." + $this.val()).toggle($this.is(":checked"));
});
.box {
padding: 20px;
display: none;
margin-top: 20px;
border: 1px solid #000;
}
.red {
background: #ff0000;
}
.green {
background: #00ff00;
}
.blue {
background: #0000ff;
}
.yellow {
background: yellow;
}
.two-colors {
background: pink
}
<div>
<label>
<input type="checkbox" name="colorCheckbox" value="red">red</label>
<label>
<input type="checkbox" name="colorCheckbox" value="green">green</label>
<label>
<input type="checkbox" name="colorCheckbox" value="blue">blue</label>
<label>
<input type="checkbox" name="colorCheckbox" value="yellow">yellow</label>
</div>
<div class="red box">You have selected <strong>red checkbox</strong> so i am here</div>
<div class="green box">You have selected <strong>green checkbox</strong> so i am here</div>
<div class="blue box">You have selected <strong>blue checkbox</strong> so i am here</div>
<div class="yellow box">You have selected <strong>blue checkbox</strong> so i am here</div>
<div class="two-colors box">You have selected <strong>two colors</strong> so i am here</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Note that this assumes the only checkboxes with the values red and green are the ones you care about. If you need to narrow it down further, give them a class or ID.

Events availability from the container to the child element

In the following code, I have a DIV parent container which has a SPAN container and the SPAN container containing the INPUT child elements.
When I click the gray area which is for the DIV, I see the 'I'm clicked!' message. I also see the same message when I click the white area of the SPAN or the input elements.
Shouldn't the SPAN container prevent the DIV container onclick event?
<div onclick="clicked()" style="padding: 20px; background-color: gray">
<span style="padding: 10px; background-color: white">
<label for="us">US</label>
<input type="radio" name="us" />
<label for="canada">Canada</label>
<input type="radio" name="canada" />
<label for="europe">Europe</label>
<input type="radio" name="europe" />
</span>
</div>
<script>
function clicked() {
alert("I'm clicked!");
}
</script>

Try this -
<div id="clickableDiv" style="padding: 20px; background-color: gray">
<span id='spanEle' style="padding: 10px; background-color: white">
<label class="input-area" for="us">US</label>
<input class="input-area" type="radio" name="us" />
<label class="input-area" for="canada">Canada</label>
<input class="input-area" type="radio" name="canada" />
<label class="input-area" for="europe">Europe</label>
<input class="input-area"`enter code here` type="radio" name="europe" />
</span>
</div>
<script>
$(document),ready(function(){
$("#clickableDiv").bind('click', function(e){
if(e.target.id != 'spanEle' && !$('#'+e.target.id).hasClass('input-area')){
alert("I am clicked!");
}
});
});
</script>

Develop Reference

JavaScript is the programming language of the Web.

Default radio button option with jquery - javascript

Related

How to only allow "checking" of only one checkbox

Toggle CSS class depending on the radio button status

jQuery and HTML - clicking on current div box id to display sub dvi box content

How can I add event if multple checkboxes are checked?

Events availability from the container to the child element

Categories

Resources