Develop Reference

Jquery : specify an id of an input:checkbox element

I have this little sample if jquery code, but I want to make it more specific for one of two different inputs of my HTML page.
<script>
// check only one box at time
$(document).ready(function() {
$('input:checkbox').click(function() {
$('input:checkbox').not(this).prop('checked', false);
});
});
</script>
And these are the two concerned inputs :
<div id="reponses-section" class="form-check">
<c:forEach items="${question.reponses}" var="reponse">
<input id="${reponse.id}" name="id-reponse" value="${reponse.id}"
type="checkbox" class="form-check-input">
<h5>${reponse.texte}</h5>
</c:forEach>
</div>
<div id="theme-btn" class="pull-right">
<label class="switch">
<input id="changeThemeBtn" type="checkbox" onclick="getTheme(this);" value="dark">
<span class="slider round"></span>
</label>
</div>
Is it possible to specify an id for the js sample of code, and if yes what is the syntax to use ?
Thank you in advance

jQuery selects items using CSS selector syntax, so ID would just be #yourTargetId.

I strongly recommend you to use this method. You can change the data-id name with whatever you want.
$(document).ready(function() {
$('input[data-id="checkbox1"]').click(function() {
$('input[data-id="checkbox1"]').prop('checked', false);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<input data-id="checkbox1" id="${reponse.id}" name="id-reponse" value="${reponse.id}" type="checkbox" class="form-check-input">
<input data-id="checkbox2" id="changeThemeBtn" type="checkbox" onclick="getTheme(this);" value="dark">

Given two yes/no fields, how can I use JavaScript to make the field 2 value checked "Yes" whenever the field 1 value is checked "Yes"?

If Field 1 is checked "Yes" then Field 2 should be checked "Yes"
This is what I've been trying so far:
Field 1:
<div class="entire">
<div class="col3"><label class="label-right">||FIELDTAG Field1||Question15||ENDFIELDTAG|| </label></div>
<div class="col9"><input type="radio" name="Field1" id="Question15yes" value="Yes" onclick="Check()">Yes <input type="radio" name="Field1" value="No" onclick="Check()">No</div>
Field 2:
<div class="entire">
<div class="col3"><label class="label-right">||FIELDTAG Field2||Question16||ENDFIELDTAG|| </label></div>
<div class="col9"><input type="radio" name="Field2" id="Question16yes" value="Yes" onclick="Check()">Yes <input type="radio" name="Field2" value="No" onclick="Check()">No</div>
I was trying something as simple as this js below, but I'm definitely missing something. Any help would be greatly appreciated!
<script language="JavaScript">
function Check() {
$("#Question15yes").click(function(){
if ($(this).is(':checked'))
{
$("#Question16yes").val("Yes");
}
}
});
}
</script>

Make sure you are including JQuery in your page.
To bind your event, you need to wait that the DOM is fully loaded, else you would try to use an element that doesn't exist yet.
<script language="JavaScript">
$(function() {
$(".question-checkbox").click(function(){
if ($(this).is(':checked'))
{
console.log($(this));
}
});
});
</script>
Also, you might want to change the JQuery selector from ID to class, so that you can use the same code for all similar checkboxes.
Put a .question-checkbox class on the inputs, and remove all onclicks.

You don't have to call check on every click. Once document loads, call it once.
window.addEventListener("load", function(){
$("input[type='radio']").on("click", function(){
if($("#Question15yes").is(':checked'))
$("#Question16yes").prop("checked", true);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="entire">
<div class="col3">
<label class="label-right">||FIELDTAG Field1||Question15||ENDFIELDTAG|| </label>
</div>
<div class="col9">
<input type="radio" name="Field1" id="Question15yes" value="Yes">
Yes
<input type="radio" name="Field1" value="No" >No
</div>
<div class="entire">
<div class="col3">
<label class="label-right">||FIELDTAG Field2||Question16||ENDFIELDTAG|| </label>
</div>
<div class="col9">
<input type="radio" name="Field2" id="Question16yes" value="Yes">
Yes
<input type="radio" name="Field2" value="No">
No
</div>

Use this for a single checkbox with the class name "example":
$('input.example').on('change', function() {
$('input.example').not(this).prop('checked', false);
});

radiobuttons and conditional checkbox

I have 2 radio-buttons and a checkbox.
When the first option is "personalized" the checkbox "hidden" should be automatically checked.
<div class="field-type-list-text field-name-field-main-download-category field-widget-options-buttons form-wrapper" id="edit-field-main-download-category"><div class="form-item form-type-radios form-item-field-main-download-category-und">
<label for="edit-field-main-download-category-und">Main Download Category </label>
<div id="edit-field-main-download-category-und" class="form-radios"><div class="form-item form-type-radio form-item-field-main-download-category-und">
<input type="radio" id="edit-field-main-download-category-und-general" name="field_main_download_category[und]" value="general" class="form-radio" /> <label class="option" for="edit-field-main-download-category-und-general">General </label>
</div>
<div class="form-item form-type-radio form-item-field-main-download-category-und">
<input type="radio" id="edit-field-main-download-category-und-personalized" name="field_main_download_category[und]" value="personalized" class="form-radio" /> <label class="option" for="edit-field-main-download-category-und-personalized">Personalized </label>
</div>
</div>
</div>
</div><div class="field-type-list-boolean field-name-field-hidden field-widget-options-onoff form-wrapper" id="edit-field-hidden"><div class="form-item form-type-checkbox form-item-field-hidden-und">
<input type="checkbox" id="edit-field-hidden-und" name="field_hidden[und]" value="1" class="form-checkbox" /> <label class="option" for="edit-field-hidden-und">Hidden </label>
</div></div>
I've made this script, but it is not working:
jQuery(document).ready(function () {
if ( $('.personalized input').val() = "personalized" ) {
$('.checkbox input').attr('checked');
}
});

You have few problems. As others already pointed out, you are checking document.ready instead of onChange event. So it checks on page load, instead of checking on radio button state change.
Another problem is that you are checking $('.personalized input') value, but you do not have personalized class in your html.
Your radio buttons have common class form-radio. So you can use it as a selector.
$('.form-radio').on("change", function(){
if ( $(this).val() == "personalized" ) {
$('.form-checkbox').prop('checked', true);
}
else{
$('.form-checkbox').prop('checked', false);
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="field-type-list-text field-name-field-main-download-category field-widget-options-buttons form-wrapper" id="edit-field-main-download-category"><div class="form-item form-type-radios form-item-field-main-download-category-und">
<label for="edit-field-main-download-category-und">Main Download Category </label>
<div id="edit-field-main-download-category-und" class="form-radios"><div class="form-item form-type-radio form-item-field-main-download-category-und">
<input type="radio" id="edit-field-main-download-category-und-general" name="field_main_download_category[und]" value="general" class="form-radio" /> <label class="option" for="edit-field-main-download-category-und-general">General </label>
</div>
<div class="form-item form-type-radio form-item-field-main-download-category-und">
<input type="radio" id="edit-field-main-download-category-und-personalized" name="field_main_download_category[und]" value="personalized" class="form-radio" /> <label class="option" for="edit-field-main-download-category-und-personalized">Personalized </label>
</div>
</div>
</div>
</div><div class="field-type-list-boolean field-name-field-hidden field-widget-options-onoff form-wrapper" id="edit-field-hidden"><div class="form-item form-type-checkbox form-item-field-hidden-und">
<input type="checkbox" id="edit-field-hidden-und" name="field_hidden[und]" value="1" class="form-checkbox" /> <label class="option" for="edit-field-hidden-und">Hidden </label>
</div></div>
This part:
else{
$('.form-checkbox').prop('checked', false);
}
you only need if you want to un-check if not personalized.
Also take care of .prop() which is used for jQuery 1.6+. For lower versions use .attr()

You have to specify when do you want the script to check if the radio is checked or not. If you use just document.ready() function, it will check it only once, when the site is loaded and since it's not checked - the checkbox won't be checked neither.
You can use following approach: check it with every click event on the radio button.
$('.personalized').click(function() {
if ($(this).is(':checked')) {
$('.checkbox').attr('checked', 'checked');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='radio' class='personalized'>
<input type='checkbox' class='checkbox'>

Simply you need to do it in ready function
jQuery(document).ready(function () {
if ($(".personalized").is(":checked") ) {
$('.checkbox').attr('checked', 'checked');
}
});
if you want them to apply on page load.

You have several problems here:
The code as written only runs on page load. Since you said you want the checkbox to be "automatically" checked, you should attach a change handler to the radio array.
.val() called on a radio array returns the value of the first element in the selected set, regardless of which one is checked. You need to add :checked to your selector to filter down to the one selected radio element.
Your single equals sign is the assignment operator and should be replaced with ===.
.attr('checked') returns the value of the checked attribute. There are actually two problems here: attr only looks at the attribute initially assigned to the element; you need to use prop instead to update the checked property. The second problem is that the one-parameter attr function is used to read the attribute. You want the two-parameter function to set it.
Here's a working example:
jQuery(document).ready(function () {
$('input[name="radio"]').on('change',function(){
if ( $('input[name="radio"]:checked').val() === "personalized" ) {
$('#hidden').prop('checked','checked');
} else {
$('#hidden').prop('checked','');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="radio" id="personalized" value="personalized"/><label for="personalized">personalized</label><br/>
<input type="radio" name="radio" id="general" value="general"/><label for="general">general</label><br/>
<input type="checkbox" id="hidden" name="hidden"/><label for="hidden">hidden</label>

How to select a radio input on ajax callback

I'm going to make a auto complete form. In which the options of the form like address, telephone, fax and department are auto select after a username is selected by a drop down (auto suggest) list.
The whole process is completed. But only one thing - the radio button. I don't have any idea how to make it selected from a value return by ajax. Here is my code.
HTML
<form id="inst_name">
Address : <textarea name="addr" id="addr"></textarea>
Telephone : <input type="text" name="tel" id="tel" />
Department :
<input type="radio" name="dep" id="dep1" value="1" /><label>Dep 1</label>
<input type="radio" name="dep" id="dep2" value="2" /><label>Dep 2</label>
<input type="radio" name="dep" id="dep3" value="3" /><label>Dep 3</label>
</form>
Javascript
$('#inst_name').blur(function(){
$.ajax({
url: 'inc/autoform.json.php',
dataType:'json',
data: {name:$('#inst_name').val()},
success: function(data){
$('#inst_addr').val(data.addr);
$('#inst_tel').val(data.tel);
$('#hidden_dep').val(data.dep);
}
});
});
For example, if an ajax returned data.dep="1" so the Dep 1 should be selected.

You can simply loop through them then check the one that matches the value.
$("[name=dep]").each(function(i,v){
var dep2 = $(this).val();
if(data.dep == dep2) $(this).prop("checked",true);
});

By calling val() in the success callback, you are simply assigning a value to the element.
You would want to manipulate the checked attribute of the element in the callback.
$('#inst_addr, #inst_tel, #hidden_dep').prop("checked",true);

$("#inst_name input[value="+data.dep+"]").prop("checked", true);
EDIT to add the explanation:
The radio inputs all share the same name but they are different html elements, therefore you need to select the input whose value matches the one you received and check it.
To select the radio button whose value is the one you're looking for you use this code:
$("#inst_name input[value="+data.dep+"]")
and then you just check it with this code:
.prop("checked", true);

by selecting nth radio
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<div id="inst_name">
<input type="radio" name="dep" value="1" /><label>Dep 1</label>
<input type="radio" name="dep" value="2" /><label>Dep 2</label>
<input type="radio" name="dep" value="3" /><label>Dep 3</label>
</div>
<script>
var n = 0;
$($('#inst_name input:radio')[n]).prop('checked', true);
</script>
</body>
</html>

Show/hide textfile depending on radio buttons' selection

I know this is a repeated question, but I cannot make it run. I tried all the solutions I found here in SO and googling...
I have this radio button form in my page. What I want is that when the user selects the 'only one attendee' option a text field appears ONLY for this option. If the user selects another one it dissapears.
Once the user selects only one option, the text box appears.
I've been trying doing with javascript. I use this piece of code
<script>
$(document).ready(function()
$("#send_to_one").hide();
$("input:radio[name="people"]").change(function(){
if(this.checked){
if(this.value =='one'){
$("#send_to_one").show()
}else{
$("#send_to_one").hide();
}
}
}
});
</script>
The form's code is
<div id="send_to">
<input type="radio" id="send_poll" name="people" value="all" checked="checked">all the attendees</br>
<input type="radio" id="send_poll" name="people" value="one" >only one attendee<br/>
<div id="send_to_one">
<label>Write the attendee's name: </label><input type="text" id="attendeename"><br/><br/>
</div>
<input type="radio" id="send_poll" name="people" value="group">a group of attendees</br>
</div>
I've checked that the javascript files are loaded. I also tried putting the javascript code inside the html.erb file where the form is, in a separated .js file and in application.htm.erb's <head></head> section, but no luck. Where do I need to put each part of code exactly in order to work?
Using Rails 3.0.4, Ruby 1.8.9. I'm also using JQuery

LIVE DEMO
HTML:
<div id="send_to">
<input type="radio" id="send_poll" name="people" value="all" checked="checked" />all the attendees<br/>
<input type="radio" id="send_poll" name="people" value="one" />only one attendee<br/>
<div id="send_to_one">
<label>Write the attendee's name: </label><input type="text" id="attendeename" /><br/><br/>
</div>
<input type="radio" id="send_poll" name="people" value="group" />a group of attendees<br/>
</div>
jQ:
$(document).ready(function(){
$("#send_to_one").hide();
$("input:radio[name='people']").change(function(){
if(this.value == 'one' && this.checked){
$("#send_to_one").show();
}else{
$("#send_to_one").hide();
}
});
});

$(document).ready(function() {
$("#send_to_one").hide();
$("input:radio[name='people']").change(function(){
if(this.checked){
if(this.value =='one'){
$("#send_to_one").show()
}else{
$("#send_to_one").hide();
}
}
});
});
Your code was right, but a few missing braces, brackets, and unescaped quotes. Are you using any form of smart javascript editor? Because you really should...
http://jsfiddle.net/7yt2A/