I am novice in javascript and jQuery.
In my html have 2 radio buttons and one div. I want to show that div if I check the first radio-button but otherwise I want it to be hidden
so: If radio button #watch-me is checked --> div #show-me is visible.
If radio button #watch-me is unchecked (neither are checked or the second is checked) --> div #show-me is hidden.
Here is what I have so far.
<form id='form-id'>
<input id='watch-me' name='test' type='radio' /> Show Div<br />
<input name='test' type='radio' /><br />
<input name='test' type='radio' />
</form>
<div id='show-me' style='display:none'>Hello</div>
and JS:
$(document).ready(function () {
$("#watch-me").click(function() {
$("#show-me:hidden").show('slow');
});
$("#watch-me").click(function(){
if($('watch-me').prop('checked')===false) {
$('#show-me').hide();}
});
});
How should I change my script to achieve that?
I would handle it like so:
$(document).ready(function() {
$('input[type="radio"]').click(function() {
if($(this).attr('id') == 'watch-me') {
$('#show-me').show();
}
else {
$('#show-me').hide();
}
});
});
Input elements should have value attributes. Add them and use this:
$("input[name='test']").click(function () {
$('#show-me').css('display', ($(this).val() === 'a') ? 'block':'none');
});
jsFiddle example
$('input[name=test]').click(function () {
if (this.id == "watch-me") {
$("#show-me").show('slow');
} else {
$("#show-me").hide('slow');
}
});
http://jsfiddle.net/2SsAk/2/
$('input[type="radio"]').change(function(){
if($("input[name='group']:checked")){
$(div).show();
}
});
var switchData = $('#show-me');
switchData.hide();
$('input[type="radio"]').change(function(){ var inputData = $(this).attr("value");if(inputData == 'b') { switchData.show();}else{switchData.hide();}});
JSFIDDLE
Related
I got a jquery statement that shows/hides image upload input based on the user's radio selection.
I now have an issue where another radio selector component is started to interfere with the below. If any radio selector from the other section is pressed. All the file inputs disappear.
The below radio selector culprit
<div class="background-choices">
<h3>Color</h3>
<label>
<input id="background-choice-input" type="radio" name="color" value="Blue" />
<img src="https://www.colorhexa.com/000080.png">
</label>
</div>
My jquery statement
$(document).ready(function() {
$('input[type="radio"]').click(function() {
$('.imagehide').hide(); // Hide all images here
if ($(this).attr('id') === '1choice') {
$('#img-image1').show();
} else if ($(this).attr('id') === '2choice') {
$('#img-image1').show();
$('#img-image2').show();
} else if ($(this).attr('id') === '3choice') {
$('#img-image1').show();
$('#img-image2').show();
$('#img-image3').show();
} else {
}
});
});
I have the following hidden input in a form tag:
<input type="hidden" id="myID" name="pn" value="">
On change, if the value of this input is "abcd", then do something. But I can´t make it work.
This is my script:
$("#myID").change(function () {
var myVAR = $("#myID").val();
if (myVAR == "abcd") {
// my code here
}
});
Can someone help pls?
Thanks much.
Because the input is hidden, when you change the value, you need to trigger the change: $("#myID").val('abcd').trigger('change');
$("#myID").change(function () {
if ($(this).val() == "abcd") {
alert("Found 'abcd'");
}
});
$(document).on('click', 'button', function() {
$("#myID").val('abcd').trigger('change');
alert($("#myID").val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="hidden" id="myID" name="pn" value="">
<button>Set abcd for myID</button>
how can an HTML element/tag for example this:
<input type="checkbox" id="1234" checked onClick="replace(1234)"> I have a car<br>
replaced with this when clicked
<input type="checkbox" id="1234" unchecked onClick="replace(1234)"> I have a car<br>
I want to replace only the input tag and change HTML code in tha position
Thanks
$('#1234').click(function(){
if($(this).is(':checked')) {
$(this).attr('checked',true);
console.log('checked')
}
else {
$(this).attr('checked',false);
console.log('unchecked')
}
});
<!DOCTYPE html>
<html>
<header>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</header>
<body>
<input type="checkbox" id="1234" checked > I have a car<br>
</body>
</html>
Kindly check the above snippet. It might help.
This will check if the element has the attribute checked, if so then it will remove it and set a new attribute called unchecked
function replace(id) {
var attr = $("#" + id).attr('checked');
// For some browsers, `attr` is undefined; for others,
// `attr` is false. Check for both.
if (typeof attr !== typeof undefined && attr !== false) {
$("#" + id).removeAttr('checked').attr("unchecked", "")
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="1234" checked onClick="replace(1234)"> I have a car<br>
You can directly call checkbox click event as shown in below code
$(document).on("click", "input[name='chk']", function() {
//alert(this.id);
debugger;
var ischecked2 = $(this).is(':checked');
if (ischecked2) { //checked
console.log("checked");
} else { //unchecked
console.log("unchecked");
}
});
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.0.min.js">
</script>
<input type="checkbox" id="1234" name="chk"> I have a car<br>
Use following code. It will help you:
$('#1234').click(function(){
if($(this).is(':checked'))
$(this).attr('checked',true);
else
$(this).removeAttr('checked');
});
I need an application where i have a drop down where i have some values and and my requirement is that when i click any value on that drop down a div will open.I have implemented that but my code is not properly working.Here what i have done so far.
<div class="form-control">
<label class="lebelMergin" for="branch_branchTypeId">
<span class="spanMergin">Office Type<span class="required">*</span></span>
<s:select name="branch.branchTypeId" id="branch_branchTypeId" requiredLabel="true" list="%{dataArr['branchTypeList']}" listValue="name"
listKey="id" headerKey="" headerValue="Select Type" >
</s:select>
</label>
</div>
<div style='display:none;' id='business'>Business Name
<br/>
<br/>
<input type='text' class='text' name='business' value size='20' />
<br/>
</div>
<style>
#business {
display:none;
}
</style>
<script>
(function() {
$('#branch_branchTypeId').on('change', function () {
$("#business").css('display', (this.value == '1') ? 'block' : 'none');
});
But when i clicking on that values in the drop down only for one value the input box is coming but i want the functionality for all the value.Here i am attaching the screen ...For HO the input box is coming but for others it is not.
Which "option" tags do yo have in your select (dropdown)?
May be this would be help:
$('#branch_branchTypeId').on('change', function (event) {
var vl = $(this).val();
var target = $("#business");
if (vl) {
target.show();
} else {
target.hide();
}
});
The problem lies in your test this.value == 1. You can use this.selectedIndex instead.
$('#branch_branchTypeId').on('change', function () {
$("#business").css('display', (this.selectedIndex >= 1) ? 'block' : 'none');
});
Following your comment, I assumed that selectIndex == 0 corresponds to the default option, with business div not displayed.
See Fiddle: http://jsfiddle.net/3nvdeoab/
Currently I have this radio buttons
Eletronics
Computers
Others
What I am trying to do is, if radio button Others is selected, I would like to display an input text field and let the user type.
What I would like to do is, when I select Others and type something inside the input field, then when I choose back to Eletronics or Computers, I would like to clear the text that I wrote inside input field.
Please kindly provide me with the solution of JavaScript or jQuery.
Here is my code sample. Please kindly check it: http://jsfiddle.net/dnGKM/
UPDATE
$('input:radio').on('click', function() {
if($(this).attr('id') == 'others') {
$('#showhide').css('opacity', 1.0);
} else {
$('#showhide').css('opacity', 0).find('input:text#others_text').val('');
}
});
DEMO
You can use this:
document.getElementById("others_text").value='';
to clear the input field.
Please add below code of line in your code:
document.getElementById("others_text").value = '';
now its look like:
document.getElementById("others").addEventListener("click", function()
{
document.getElementById("others_text").value = '';
document.getElementById("showhide").style.opacity = 1;
}, false);
document.getElementById("computers").addEventListener("click", function()
{
document.getElementById("showhide").style.opacity = 0;
}, false);
document.getElementById("electronics").addEventListener("click", function()
{
document.getElementById("showhide").style.opacity = 0;
}, false);
This would be helpful for you.
Try with this Solution:
$(function() {
$('input[type="radio"]').click(function() {
if($(this).attr('id') == 'others') {
$('#others-text').show();
} else {
$('#others-text').hide();
$('#others-text').val('');
}
});
})
Here there is a JSFiddle link:
http://jsfiddle.net/dnGKM/4/
You add the jQuery tag to your question, so that should do the trick using jQuery :)
CSS:
.hidden {
display: none;
}
HTML:
<label for="electronics">Electronics</label>
<input type="radio" id="electronics" name="rdbutton" />
<label for="computers">Computers</label>
<input type="radio" id="computers" name="rdbutton" />
<label for="others">Others</label>
<input type="radio" id="others" name="rdbutton" />
<input type="text" id="others-text" name="others-text" class="hidden" />
JS:
$(function() {
$('input[type="radio"]').click(function() {
if($(this).attr('id') == 'others') {
$('#others-text').removeClass('hidden');
} else {
$('#others-text').addClass('hidden');
$('#others-text').val('');
}
});
});
===============HTML
<input type="radio" name="rdo" value="1" checked="checked" />Electronics
<input type="radio" name="rdo" value="2" />Computers
<input type="radio" name="rdo" value="3" />Others
===============jQuery
$('input[name=rdo]').change(function() {
var a = $(this).val();
if (a != 3) {
$('#textboxid').hide();
}else{
$('#textboxid').val('');
$('#textboxid').show();
}
});
$("#<%=text1.ClientID%>").val('');