We Keep Coding

bunch of radio buttons and want to enable the toggle on one of them

I am using a vanilla javascript on radio buttons to show/hide the block of tr with id to select of a radio and on the unselect of the radio, hide that piece..
the vanilla js is working fine, want to move to jquery to tryng to the same in jquery but i am bit lost here
so every radio has different ID attached to it with no class. and i only want to show the radio of id10 if checked , if any other radio is selected, i want to hide that div, how can i do in jquery
for javascript i am doing this
function toggle() {
var x = document.getElementById("myDIV");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
tried like this :
but its not even doing anything
not even an alert
$(document).ready(function() {
$("#myDiv").hide();
$('input[name="outputFormat"]').click(function() {
alert("hi");
let id = $(this).attr('id');
if(id == 'of9') {
$("#myDiv").show();
}else {
$("#myDiv").hide();
}
});
}

You can target the radios by using an attribute selector with the desired group name. Then you can use .is() to check if the current element matches your selector (like Element.matches in vanilla) and then toggle the visibility with the utility functions .show() and .hide.
$('input[name="sel"]').on('change', function() {
if ($(this).is('#id10')) {
$('#myDiv').show();
} else {
$('#myDiv').hide();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" name="sel" value="1">
<input type="radio" name="sel" value="2" id="id10">
<input type="radio" name="sel" value="3">
<div id="myDiv">Content</div>

asp.net radio button on click event without page load

My problem is pretty simple, but I am not able to fix it.
I have 2 radio buttons and a hidden text label. Once the first radio button is clicked, I want to show the hidden label, and when the second radio button is clicked, I want to hide it again - all this without reloading the page.
I am hoping this can be achieved by JavaScript, but unfortunately I don't know how.
Any help will be appreciated.
Thanks in advance.

Try the following simple example.
$(document).ready(function() {
$('input[type=radio][name=GName]').change(function() {
if (this.value == '1') {
$("#label").text("Yes");
}
else if (this.value == '2') {
$("#label").text("No");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<input type="radio" name="GName" value="1"> Yes</input>
<input type="radio" name="GName" value="2"> No</input>
<p> <span id="label"> </p>

You can use jQuery to bind an onlick-Event handler
$('#firstcheckbox').click(function() {
//code goes here
});
$('#secondcheckbox').click(function() {
//code goes here
});

How to open a div selecting a value from dropdown in jQuery

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/

Show div when radio button selected

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

jQuery addClass when a radio button in a group is selected

I have the following code:
var selectedMarkerClass = 'was-selected';
$('.group_1').change(function() {
$(this).addClass(selectedMarkerClass);
if ($('.' + selectedMarkerClass).length == $('.group_1').length) {
$('#2').removeClass('red');
}
});
Here is the HTML in question:
<input class="single_text_input group_1" type="text" name="primary_referral" />
<input class="single_text_input group_1" type="text" name="secondary_referral" />
<input class="group_1" type="radio" name="referral_open" value="Yes" /> Yes
<input class="group_1" type="radio" name="referral_open" value="No" /> No
<span id="2" class="red">Referral Group</span>
What is happening now is that both radio buttons in the group have to be changed in order for the class to be removed from the span. I would like it to work where only one of the radio buttons in the group has to be changed.

Use the click event not change event.
$('.group_1').click(function() {
$(this).addClass(selectedMarkerClass);
if ($('.' + selectedMarkerClass).length == $('.group_1').length) {
$('#2').removeClass('red');
}
});
Update:
if ($('.' + selectedMarkerClass).length == $('.group_1').length)
Is tripping you up. You are removing the red class only if the selected class has been added to each radio and you can only add the selected class if you click each radio.
A better way would be:
$('.group_1').click(function() {
$('#2').removeClass('red');
});
Less code is often times better. You can't unselect a radio. So any click on the radios ensures at least one is clicked.

Try it with click event instead. You see the change take place after the second click because change gets fired after the first radio button loses focus.

After both radio button changed, $('.' + selectedMarkerClass).length == 2 and $('.group_1').length == 4 because you are using .group_1 class for radio buttons and as well as for input[type=text] too.
need filter your radio button, use "[name=referral_open]",
var selectedMarkerClass = 'was-selected';
$('.group_1').change(function () {
$(this).addClass(selectedMarkerClass);
if ($('.' + selectedMarkerClass).length == $('.group_1[name=referral_open]').length) {
$('#2').removeClass('red');
}
});