I have some radio buttons.
<div class="user">
<input type="radio" class="user-radio" name="user" value="user"/>
<p>BLABLA</p>
</div>
<div class="user">
<input type="radio" class="user-radio" name="user" value="user"/>
<p>BLABLA</p>
</div>
<div class="user">
<input type="radio" class="user-radio" name="user" value="user"/>
<p>BLABLA</p>
</div>
What I'm trying to do is, appending the <div class="user"> with an <a><a/> when the radio button inside that div is checked. And when i choose another radio button, I want to remove the last inserted <a><a/> and insert a new one to the newly selected radio button's parent div.
I've tried something like this but I couldn't get it to work:
<script>
$('.user').click(function () {
if (!$(".user-radio").is(':checked')) {
$(this).append('<a></a>');
}
})
</script>
See DEMO
$('.user-radio').change(function () {
$('.user a').remove();
$('.user-radio:checked').parent().append('<a>hello</a>');
});
I prefer to show and hide instead of append and remove elements all time.
And use change instead.
html
<div class="user">
<input type="radio" class="user-radio" name="user" value="user"/>
<p>BLABLA</p>
blabla
</div>
js
$('.user').change(function () {
$("a").hide();
$("a", this).show();
});
css
.user a {
display: none;
}
demo
<script>
$('.user-radio').click(function () {
$('.user > a:last-child').remove()
if ($(this).is(':checked')) {
$(this).parent().append('<a>test</a>');
}
});
</script>
http://jsfiddle.net/s7eRz/
Here i have done complete bins. Demo link as below:
Demo: http://codebins.com/bin/4ldqp93
HTML:
<div class="user">
<input type="radio" class="user-radio" name="user" value="user" />
<p>
BLABLA
</p>
</div>
<div class="user">
<input type="radio" class="user-radio" name="user" value="user"/>
<p>
BLABLA
</p>
</div>
<div class="user">
<input type="radio" class="user-radio" name="user" value="user"/>
<p>
BLABLA
</p>
</div>
CSS:
.user p{
display:inline-block;
marign:0px;
padding:0px;
}
input{
padding:0px;
}
.user{
border:1px solid #f53322;
color:#333;
background:#a3f7a2;
}
.user a{
color:#112288;
font-weight:bold;
display:block;
padding:5px;
}
JQuery:
$(function() {
$('.user-radio').change(function() {
if ($(this).is(':checked')) {
$('.user a').remove();
$('.user-radio:checked').parent(".user").append("<a href='javascript:void(0);'>Add New Link</a>");
//Another Alternate way is
/* $('.user-radio:checked').closest(".user").append("<a href='javascript:void(0);'>Add New Link</a>"); */
}
});
});
Demo: http://codebins.com/bin/4ldqp93
remove the ! operator and change the first selector from ".user" .user-radio and then append the <a>link</a> to the parent of $(this) element:
$('.user-radio').click(function () {
if ($(this).is(':checked')) {
$(".user a").remove();
$(this).parent().append('<a>dwd</a>');
}
});
Related
i have and issue with jQuery code for checking which one of the radio buttons is checked and then to change the color to some of them.Also i want to disable buttons after one of them is pressed. My problem i that when i check for example 'A' all the answers becoming red and not 'A' to become green and all the others red.
$(function() {
$('.AncientQ11 [type="radio"]').on('change', function() {
$(document.getElementById("AncientQ1Ans1"))
.prev().addClass('green')
.siblings().addClass('red');
document.getElementById("AncientQ1Ans1").disabled = true;
document.getElementById("AncientQ1Ans2").disabled = true;
document.getElementById("AncientQ1Ans3").disabled = true;
document.getElementById("AncientQ1Ans4").disabled = true;
});
});
.red {color: red;}
.black {color: black;}
.green{color:green;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="AncientQ11">
<label for="AncientQ1Ans1">A</label><br>
<input type="radio" id="AncientQ1Ans1" name="AncientQ1">
<label for="AncientQ1Ans2">B</label><br>
<!--Solution-->
<input type="radio" id="AncientQ1Ans2" name="AncientQ1">
<label for="AncientQ1Ans3">C</label><br>
<input type="radio" name="AncientQ1" id="AncientQ1Ans3">
<label for="AncientQ1Ans4">D</label>
<input type="radio" name="AncientQ1" id="AncientQ1Ans4">
</div>
Removing br to use div with display:block; resolve your problem.
But after that if I select B,C or D solution, only the A is green. It's because you need to use $(this) to get the current element.
And I rewrite some parts to correspond to JQuery syntax like #freedomn-m suggests.
$(function() {
$('.AncientQ11 [type="radio"]').on('change', function() {
$(this).prev().addClass('green').siblings().addClass('red');
$("#AncientQ1Ans1").attr("disabled", "disabled");
$("#AncientQ1Ans2").attr("disabled", "disabled");
$("#AncientQ1Ans3").attr("disabled", "disabled");
$("#AncientQ1Ans4").attr("disabled", "disabled");
});
});
.red {color: red;}
.black {color: black;}
.green{color:green;}
.AncientQ11 > div{
display:block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="AncientQ11">
<div>
<label for="AncientQ1Ans1">A</label>
<input type="radio" id="AncientQ1Ans1" name="AncientQ1">
</div>
<div>
<label for="AncientQ1Ans2">B</label>
<input type="radio" id="AncientQ1Ans2" name="AncientQ1">
</div>
<div>
<label for="AncientQ1Ans3">C</label>
<input type="radio" name="AncientQ1" id="AncientQ1Ans3">
</div>
<div>
<label for="AncientQ1Ans4">D</label>
<input type="radio" name="AncientQ1" id="AncientQ1Ans4">
</div>
</div>
I want to show input group title if at least one checkbox is checked, and hide title if no checkboxes checked. Each group has his own title and data-value. There may be 5+ input groups.
Here is the codepen: [Example code here][1]
[1]: https://codepen.io/anon/pen/JyrQgW
$(document).ready(function(){
});
.output {
margin-top:45px;
}
<div class="group-block" data-value="1">
<h1 class="group-title" data-value="1">group1</h1>
<input type="checkbox" data-value="1">item1
<input type="checkbox" data-value="1">item2
<input type="checkbox" data-value="1">item3
<input type="checkbox" data-value="1">item4
</div>
<div class="group-block" data-value="2">
<h1 class="group-title" data-value="2">group2</h1>
<input type="checkbox" data-value="2">item1
<input type="checkbox" data-value="2">item2
<input type="checkbox" data-value="2">item3
<input type="checkbox" data-value="2">item4
</div>
<div class="output">HERE SHOW TITLES</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
enter code here
At the end, I'm not so good with JS/Jquery but I was trying to make it work for a few hours and have a feeling that I go very deep but there is a 2 line solution.
Thanks for help
I this what you are looking for?
$(document).ready(function() {
check()
});
$("input[type=checkbox]").change(function() {
check()
})
function check() {
$(".group-block").each(function() {
$(this).find(".group-title").css("display", $(this).find("input[type=checkbox]:checked").length ? "block" : "none")
})
}
It will check if any checkbox has been checked on both .ready() and .change() statement, and show or hide the title depends on the result.
$(document).ready(function() {
check()
});
$("input[type=checkbox]").change(function() {
check()
})
function check() {
$(".group-block").each(function() {
$(this).find(".group-title").css("display", $(this).find("input[type=checkbox]:checked").length ? "block" : "none")
})
}
.output {
margin-top: 45px;
}
<div class="group-block" data-value="1">
<h1 class="group-title" data-value="1">group1</h1>
<input type="checkbox" data-value="1">item1
<input type="checkbox" data-value="1">item2
<input type="checkbox" data-value="1">item3
<input type="checkbox" data-value="1">item4
</div>
<div class="group-block" data-value="2">
<h1 class="group-title" data-value="2">group2</h1>
<input type="checkbox" data-value="2">item1
<input type="checkbox" data-value="2">item2
<input type="checkbox" data-value="2">item3
<input type="checkbox" data-value="2">item4
</div>
<div class="output">HERE SHOW TITLES</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Demo 2 from coment
$(document).ready(function() {
check()
});
$("input[type=checkbox]").change(function() {
check()
})
function check() {
$(".output").text("");
$(".group-title").hide();
$(".group-block").each(function() {
if ($(this).find("input[type=checkbox]:checked").length)
$(".output").text($(".output").text() + $(this).find(".group-title").text())
})
}
.output {
margin-top: 45px;
}
<div class="group-block" data-value="1">
<h1 class="group-title" data-value="1">group1</h1>
<input type="checkbox" data-value="1">item1
<input type="checkbox" data-value="1">item2
<input type="checkbox" data-value="1">item3
<input type="checkbox" data-value="1">item4
</div>
<div class="group-block" data-value="2">
<h1 class="group-title" data-value="2">group2</h1>
<input type="checkbox" data-value="2">item1
<input type="checkbox" data-value="2">item2
<input type="checkbox" data-value="2">item3
<input type="checkbox" data-value="2">item4
</div>
<div class="output">HERE SHOW TITLES</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Try this:
$(document).ready(function(){
$('.group-block h1').hide();
$('.output').click(function(){
$('.group-block h1').hide();
$('input[type=checkbox]:checked').closest('.group-block').find('h1').show();
});
});
Suggestion: You may want to hide the titles initially with CSS.
I use this javascrpit code to show/hide a div when a specific checkbox is checked
$(function() {
$('input[name=choice1]').on('click init-choice1', function() {
$('#delivery').toggle($('#store').prop('checked'));
}).trigger('init-choice1');
});
How can I add an animation to my delivery div when the choice1 checkbox is checked ?
Here an actual exemple of what result I have without animation : https://jsfiddle.net/6h4u3a1b/
Thanks in advance,
~Quentin
You can do, for example:
$( document ).ready(function(){
$(function() {
$('input[name=choice1]').on('click init-choice1', function() {
if ($('#store').prop('checked')) $('#delivery').fadeIn();
else $('#delivery').fadeOut();
}).trigger('init-choice1');
});
})
or instead of the "if ..." simply:
$('#delivery').fadeToggle();
This will show a little flicker at the beginnig so you youd have to add this style rule to prevent it:
.two { display: none }
Replace fadeIn/fadeOut with slideUp/slideDown for a different animation our use jQuery's animate() function to animate whatever CSS rule you want.
Here's my solution: Hope it helps!
$( document ).ready(function(){
$("#delivery").hide();
$(function() {
$('input[name=choice1]').on('click init-choice1', function() {
if ($('#store').prop('checked')) $('#delivery').fadeTo(100, 0.1).fadeTo(200, 1.0);
else $('#delivery').fadeOut();
}).trigger('init-choice1');
});
})
<script type = "text/javascript" src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="one">
<p>
<input name="choice1" type="radio" id="download" checked />
<label for="download">Download</label>
</p>
<p>
<input name="choice1" type="radio" id="store" />
<label for="store">Store</label>
</p>
</div>
<div class="two" id="delivery">
<p>
<input name="choice2" type="radio" id="x" />
<label for="x">Add to X</label>
</p>
<p>
<input name="choice2" type="radio" id="y" />
<label for="y">Add to Y</label>
</p>
</div>
$(document).ready(function(){
$(".registration_info input").click(function(){
if($(this).prop("checked")){
$(".registration_info input:checkbox").prop("checked", false);
$(this).prop("checked", true);
}
});
});
// -------- dealer area --------
$(document).ready(function(){
$("#area").click(function(){
if($(this).is(":checked")){
$("#some_area").show();
}
else
$("#some_area").hide();
});
});
#some_area {
width:200px;
height:200px;
background-color: #f2f2f2;
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="registration_info">
<label>
<input type="checkbox" value="Item1">Item1
</label>
<label>
<input type="checkbox" value="Item2" id="area">Item2
</label>
<label>
<input type="checkbox" value="Item3">Item3
</label>
<div>
<div id="some_area">Some_area
</div>
</div>
</div>
Now, I have three checkbox and only can have one checked at the moment.
Also, there is a gray color area will show out when "Item2" was checked.
When I check item2 first (the gray area show) then check item1 or item3, the item2 will un-check but the gray color area still show out.
How to not show gray area when item2 is not checked?
You can use jquery toggle when user click another checkbox. You can sum it up to this:
$(".registration_info input").click(function() {
if ($(this).prop("checked")) {
$(".registration_info input:checkbox").prop("checked", false);
$(this).prop("checked", true);
}
//here toggle #some_area element according to check status
$("#some_area").toggle($("#area").prop("checked"));
});
#some_area {
width: 200px;
height: 200px;
background-color: #f2f2f2;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="registration_info">
<label>
<input type="checkbox" value="Item1" />Item1</label>
<label>
<input type="checkbox" value="Item2" id="area" />Item2</label>
<label>
<input type="checkbox" value="Item3" />Item3</label>
<div>
<div id="some_area">Some_area</div>
</div>
</div>
p.s. By the way why you don't use radio buttons instead?
It can be done within the .registration_info click event:
$(document).ready(function(){
$("#some_area").hide();
$(".registration_info input").click(function(){
$("#some_area").hide();
if($(this).prop("checked")){
$(".registration_info input:checkbox").prop("checked", false);
$(this).prop("checked", true);
if ($(this).attr('id')=='area'){
$("#some_area").show();
}
}
});
});
#some_area {
width:200px;
height:200px;
background-color: #f2f2f2;
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="registration_info">
<label>
<input type="checkbox" value="Item1">Item1
</label>
<label>
<input type="checkbox" value="Item2" id="area">Item2
</label>
<label>
<input type="checkbox" value="Item3">Item3
</label>
<div>
<div id="some_area">Some_area
</div>
</div>
</div>
You should bind a change handler, not a click handler:
$('.registration_info').on('change', function(e) {
$(this).find('input').not(e.target).prop('checked', false);
$('#some_area').toggle($('#area').prop('checked'));
});
#some_area {
width:200px;
height:200px;
background-color: #f2f2f2;
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="registration_info">
<label>
<input type="checkbox" value="Item1">Item1
</label>
<label>
<input type="checkbox" value="Item2" id="area">Item2
</label>
<label>
<input type="checkbox" value="Item3">Item3
</label>
<div>
<div id="some_area">Some_area
</div>
</div>
</div>
Ok, first of all, you can use radio inputs for doing toggles...
Second, you are calling the click event only on "#area" so the check won't happen when you click a different element, it will happen only when you uncheck/check the "#area" element.
To work around this, you can place a class on each checkbox input and do this:
$(document).ready(function(){
$(".some-class").click(function(){
if($("#area").is(":checked")){
$("#some_area").show();
}
else
$("#some_area").hide();
});
});
Here is a solution using only 2 lines of CSS and no javascript at all. To implement this, I slightly modified your HTML to make the input a sibling of the final div you're targetting or one of its parents, allowing me to use ~ , the "general sibling" selector.
#some_area {display: none;}
#area:checked ~ div #some_area {display:block;}
<div class="registration_info">
<input type="checkbox" value="Item1" id="item1"><label for="item1">Item1</label>
<input type="checkbox" value="Item2" id="area"><label for="area">Item2</label>
<input type="checkbox" value="Item3" id="item3"><label for="item3">Item3</label>
<div>
<div id="some_area">Some_area</div>
</div>
</div>
I want my div to show content, then disappear when I click a checkbox and that it shows a second content in it. When the checkbox is unchecked then the div shows the previous content back and hides the current one.
Each div have one input box and a submit button.
Thank you
Code Example :
I am using this, want to be modified this to when checkbox clicked div1 disseper and show div2
<script type="text/javascript">
function showMe (it, box) {
var vis = (box.checked) ? "block" : "none";
document.getElementById(it).style.display = vis;
}
</script>
<input type="checkbox" name="multi_note" id="checkboxes-0" value="1" onclick="showMe('div1', this)"> Show Div
<div id="div1" style="display:none">
<label>Example 1</label>
<select id="selectbasic" name="selectbasic" class="form-control">
</div>
<script>
x=false;
function Check(){
if(x){
document.getElementById("div1").style.display='inline';
document.getElementById("div2").style.display='none';
x=false;
}
else{
document.getElementById("div1").style.display='none';
document.getElementById("div2").style.display='inline';
x=true;
}
}
</script>
Select Div<input type="checkbox" id="check" onclick="Check()">
<br>
<div id="div1">
<form>
<h2>First Div</h2>
<input type="text" placeholder="Enter text">
<input type="submit" value="Submit Div1">
<form>
</div>
<div id="div2" style="display:none">
<form>
<h2>Second Div</h2>
<input type="text" placeholder="Enter text">
<input type="submit" value="Submit Div2">
<form>
</div>
the fiddle http://jsfiddle.net/4XsYA/1/
If you are using jQuery, you can use following pseudo code for achieving this.
if($("input[type=checkbox]").prop(":checked")) {
//hide some div and show another
}
else {
// code for reversing the above show/hide
}
With jquery you could do something like this. Remember putting your <script> inside the <head> tag.
$(document).ready(function() {
$('#checkboxes-0').change(function() {
if($(this).is(":checked")) {
$("#div2").show();
$("#div1").hide();
} else {
$("#div2").hide();
$("#div1").show();
}
});
});