Develop Reference

check box checked javascript

I am trying to set a value in a text box based on whether the checkbox is checked or not
The function is attached to onclick of the checkbox
This simple thing is not working :(
<div>
MyCheckbox
<input type="checkbox" id="Check1" name="FirstCkName"
onclick="testCheckbox(Check1,TextBx1)" />
</div><br>
<div>
CheckBx Text Box
<input id="TextBx1" name="CheckBxName" type="text" />
</div><br>
<script>
function testCheckbox(oCheckbox,oTxtbox)
{
if (oCheckbox.checked == true)
{
document.getElementById("oTxtbox").value=1;
}
else
{
document.getElementById("oTxtbox").value="";
}
}
</script>
Link to JSfiddle https://jsfiddle.net/JS_learner/2750639m/30/

Do something like.
var checkBox = document.getElementById("Check1");
checkBox.addEventListener("click", function(e) {
if (e.target.checked) {
document.getElementById("TextBx1").value = 1;
} else {
document.getElementById("TextBx1").value = "";
}
});
<div>
MyCheckbox
<input type="checkbox" id="Check1" name="FirstCkName" />
</div><br>
<div>
CheckBx Text Box
<input id="TextBx1" name="CheckBxName" type="text" />
</div>

The problem is this line:
onclick="testCheckbox(Check1,TextBx1)"
Here you're inventing your own parameters. That won't Work. The 'click' event is a predefined Mousevent, which will give an 'event' argument.
The 'event.target' will be the element you clicked.
This is how you should define this eventhandler:
onclick="testCheckbox"
Now you can write your script like this:
function testCheckbox(event)
{
if (event.target.checked == true)
{
document.getElementById("oTxtbox").value=1;
}
else
{
document.getElementById("oTxtbox").value="";
}
}

Jquery add and remove disable attribute

I'm having some checkboxes and text inputs. The Text inputs are disabled when the pages loads. If a checkbox is checked, the corresponding input should be fillable. Here's my current code
For some reason I can't seem to get it right, I'm pretty new to JS and Jquery.
When I click the checkboxes, nothing happens, and when I load the page I get 6 times the text "false"
var c1 = $('#check1');
var c2 = $('#check2');
var c3 = $('#check3');
var f1 = $('#field1');
var f2 = $('#field2');
var f3 = $('#field3');
$(function() {
enable_cb(c1, f1);
enable_cb(c2, f2);
enable_cb(c3, f3);
c1.click(enable_cb(c1, f1));
c2.click(enable_cb(c2, f2));
c3.click(enable_cb(c3, f3));
});
function enable_cb(checkbox, field) {
if (checkbox.checked) {
console.log('if');
field.removeAttr("disabled");
} else {
console.log('else');
field.attr("disabled", true);
}
}
Here's a piece of html, the other parts look the same as this one:
<div class="form-group" >
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect customcheckbox" for="check1">
{{ Form::checkbox('check', 1, null, ['class' => 'mdl-checkbox__input', 'id' => 'check1']) }}
<span class="mdl-checkbox__label">test</span>
</label>
</div>
<div class="form-group" >
<label for="field1">test<br></label>
<select id="field1" name="field1" disabled class="searchselect searchselectstyle">
</select>
#if ($errors->has('field1'))
<span class="help-block">
<strong>{{ $errors->first('field1') }}</strong>
</span>
#endif
</div>

You have several issues.
You should use the change event when dealing with checkboxes so that people who navigate with the keyboard can use them.
You should provide an anonymous function to the event handler. You current code is immediately executing the enable_cb() function and then ignoring any further events.
The checkbox parameter passed to the function is a jQuery object which has no checked property. You should use is(':checked') instead.
You should use prop() over attr() and removeAttr() where possible.
Try this:
$(function() {
enable_cb(c1, f1);
enable_cb(c2, f2);
enable_cb(c3, f3);
c1.change(function() {
enable_cb(c1, f1)
});
c2.change(function() {
enable_cb(c2, f2)
});
c3.change(function() {
enable_cb(c3, f3)
});
});
function enable_cb(checkbox, field) {
if (checkbox.is(':checked')) {
console.log('if');
field.prop("disabled", false);
} else {
console.log('else');
field.prop("disabled", true);
}
}
Working example
That said, you should really look to DRY up your code to reduce repetition. Exactly how you do this depends on your HTML structure, but here's an example.
<div class="checkbox-group">
<input type="checkbox" id="check" />
<input type="text" id="subcomplex"/>
</div>
<div class="checkbox-group">
<input type="checkbox" id="yearlymanagermaintainancedayscheck" />
<input type="text" id="yearlymanagermaintainancedays" />
</div>
<div class="checkbox-group">
<input type="checkbox" id="yearlysuppliermaintainancedayscheck" />
<input type="text" id="yearlysuppliermaintainancedays" />
</div>
$('.checkbox-group :checkbox').change(function() {
$(this).siblings('input').prop('disabled', !this.checked);
}).change();
Working example
Note how much simpler the code is for the latter version, and how the JS will require no updates or maintenance no matter how many input elements you add to the HTML.

If you need to toggle a property using jQuery, you can use the prop() function, which you could use to toggle the disabled property :
$(yourElement).prop('disabled',!checkbox.checked);
which in your case might look something like :
function enable_cb(checkbox, field) {
$(field).prop('disabled',!checkbox.checked);
}

jquery radio button click and change function not working

I want to hide and show div according to radio buttons value.
HTML code is,
<div id="share_to_others">
<input type="radio" value="33" id="fx_sharepl_type" name="fx_sharepl_type">
<input type="radio" value="22" id="fx_sharepl_type" name="fx_sharepl_type">
<input type="radio" value="11" id="fx_sharepl_type" name="fx_sharepl_type">
</div>
And jquery code that i tried is,
$("#share_to_others input[name='fx_sharepl_type']").click(function () {
alert("test");
});
$("#share_to_others input[name='fx_sharepl_type']").change(function () {
alert("test");
});
$("#fx_sharepl_type").change(function () {
alert("asdas");
});
$("input[name=fx_sharepl_type]:radio").change(function () {
alert("click fired");
});
$(document).on('change', 'input:radio[name=fx_sharepl_type"]', function (event) {
alert("click fired");
});
Many of them from jsfiddle working demo, But not working for me, i dont know why.
Am i doing anything wrong?

You have to give unique id to each radio button then after do like this way.
$("#r1, #r2, #r3").change(function () {

$(function() { // DOM loaded event handler
var show_duration = 0;
var content_33 = $("#content_33");
var content_22 = $("#content_22");
var content_11 = $("#content_11");
var bloc_radio_share = $("#share_to_others");
// Take an html element in parameter and show it
function show_content(content_id) {
content_id.show(show_duration);
}
// Take an html element in parameter and hide it
function hide_content(content_id) {
content_id.hide(0);
}
hide_content(content_22);
hide_content(content_11);
bloc_radio_share.change(function() {
var radio_checked_val = $('input[name=fx_sharepl_type]:checked', '#share_to_others').val();
if (radio_checked_val == 33) {
hide_content(content_22);
hide_content(content_11);
show_content(content_33);
}
else if (radio_checked_val == 22) {
hide_content(content_33);
hide_content(content_11);
show_content(content_22);
}
else { // case content == 11
hide_content(content_33);
hide_content(content_22);
show_content(content_11);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="share_to_others">
<label>
<input type="radio" value="33" id="fx_sharepl_type" name="fx_sharepl_type" checked />
33
</label>
<label>
<input type="radio" value="22" id="fx_sharepl_type" name="fx_sharepl_type" />
22
</label>
<label>
<input type="radio" value="11" id="fx_sharepl_type" name="fx_sharepl_type" />
11
</label>
</div>
<div id="content_33">
This div is displayed because of click on radio button 33
</div>
<div id="content_22">
Radio button 22 has been clicked so I appear
</div>
<div id="content_11">
If you click on radio button 11 you'll see me, like now
</div>
Here is an example of algorithm that fits your need. Logic may be not the best or the fastest but that is a begin.

Your code wors but you forgot to include a JQuery source version located to the left side of the JSFiddle window.
Selecting any version of JQuery will make your code work.

Finding value of a radio in a form after checked? Javascript DOM

I currently have this form, and I am trying to get the value of the radio buttons when it is checked but I continually keep on having an error, what may be the problem with the code below?
html
<form name="radioset2" id="radioset2" action="survey.html">
<fieldset>
<span class = "question"> question1 </span>
<div id = "radio1">
<label for="r_q1_id">Yes</label>
<input id="r_q1_id" type="radio" name="r_q1_name" value="yes" />
</div>
<div id = "radio2">
<label for="r_q2_id">No</label>
<input id="r_q2_id" type="radio" name="r_q1_name" value="no" />
</div>
</fieldset>
</form>
javascript
function validRadio() {
var radio_buttons = document.getElementsByName.elements['r_q1_name'];
for(var x=0; x<radio_buttons.length; x++) {
if(radio_buttons[x].checked) {
alert(radio_buttons[x].value + " button is checked");
} else {
alert(radio_buttons[x].value + " button is not checked");
}
}
return false;
}

If you are targetting modern browsers, you can simply use the :checked CSS selector with the querySelector function to get the value of the checked input. That would remove the need of looping over the inputs.
http://jsfiddle.net/4uy2V/
var val = document.querySelector('[name=r_q1_name]:checked').value;

Calling onclick on a radiobutton list using javascript

How do I call onclick on a radiobutton list using javascript?

How are you generating the radio button list? If you're just using HTML:
<input type="radio" onclick="alert('hello');"/>
If you're generating these via something like ASP.NET, you can add that as an attribute to each element in the list. You can run this after you populate your list, or inline it if you build up your list one by one:
foreach(ListItem RadioButton in RadioButtons){
RadioButton.Attributes.Add("onclick", "alert('hello');");
}
More info: http://www.w3schools.com/jsref/event_onclick.asp

To trigger the onClick event on a radio button, invoke the click() method on its DOM element:
document.getElementById("radioButton").click()
using jQuery:
$("#radioButton").click()
AngularJs:
angular.element('#radioButton').trigger('click')

I agree with #annakata that this question needs some more clarification, but here is a very, very basic example of how to set up an onclick event handler for the radio buttons:
window.onload = function() {
var ex1 = document.getElementById('example1');
var ex2 = document.getElementById('example2');
var ex3 = document.getElementById('example3');
ex1.onclick = handler;
ex2.onclick = handler;
ex3.onclick = handler;
}
function handler() {
alert('clicked');
}
<input type="radio" name="example1" id="example1" value="Example 1" />
<label for="example1">Example 1</label>
<input type="radio" name="example2" id="example2" value="Example 2" />
<label for="example1">Example 2</label>
<input type="radio" name="example3" id="example3" value="Example 3" />
<label for="example1">Example 3</label>

The problem here is that the rendering of a RadioButtonList wraps the individual radio buttons (ListItems) in span tags and even when you assign a client-side event handler to the list item directly using Attributes it assigns the event to the span. Assigning the event to the RadioButtonList assigns it to the table it renders in.
The trick here is to add the ListItems on the aspx page and not from the code behind. You can then assign the JavaScript function to the onClick property. This blog post; attaching client-side event handler to radio button list by Juri Strumpflohner explains it all.
This only works if you know the ListItems in advance and does not help where the items in the RadioButtonList need to be dynamically added using the code behind.

I think all of the above might work. In case what you need is simple, I used:
function checkRadio(name) {
if (name == "one") {
console.log("Choice: ", name);
document.getElementById("one-variable-equations").checked = true;
document.getElementById("multiple-variable-equations").checked = false;
} else if (name == "multiple") {
console.log("Choice: ", name);
document.getElementById("multiple-variable-equations").checked = true;
document.getElementById("one-variable-equations").checked = false;
}
}
<div class="radio-buttons-choice" id="container-3-radio-buttons-choice">
<input type="radio" name="one" id="one-variable-equations" onclick="checkRadio(name)"><label>Only one</label><br>
<input type="radio" name="multiple" id="multiple-variable-equations" onclick="checkRadio(name)"><label>I have multiple</label>
</div>

Try the following solution
$(document).ready(function() {
$('.radio').click(function() {
document.getElementById('price').innerHTML = $(this).val();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="variant">
<label><input type="radio" name="toggle" class="radio" value="19,99€"><span>A</span></label>
<label><input type="radio" name="toggle" class="radio" value="<<<"><span>B</span></label>
<label><input type="radio" name="toggle" class="radio" value="xxx"><span>C</span></label>
<p id="price"></p>
</div>

The other answers did not work for me, so I checked Telerik's official documentation it says you need to find the button and call the click() function:
function KeyPressed(sender, eventArgs) {
var button = $find("<%= RadButton1.ClientID %>");
button.click();
}