Develop Reference

JS on checkbox Change enable or disable a radio button

I have a check box that I want to enable these radio buttons. what I have does not work. how can I JS that?
im new. :(
var sipch = document.querySelector("input[name=sip]");
sipch.addEventListener( 'change', function() {
if(sipch.checked) {
document.getElementById("protocol").disabled=false;
} else {
document.getElementById("protocol").disabled=true;
}
});
<input type="checkbox" name="sip" onsubmit="goPFive(event)" method="get">do this?
<input type="radio" class="testD" name="protocol" value="udp" disabled checked/>UDP
<input type="radio" class="testD" name="protocol" value="tcp" disabled />TCP

group your radio input with fieldset then set disabled attribute at fieldset element
<fieldset id="radioWrapper" disabled>
<input type="radio" name="protocol" class="testD" value="udp"/>UDP
<input type="radio" name="protocol" class="testD" value="tcp" />TCP
</fieldset>

Automatically tick checkbox when clicking on another form input field

I'm trying to have a checkbox next to a form text-input field. The checkbox can be ticked on/off normally, however when clicking on the text-input field, the checkbox should be automatically ticked as well.
I tried this with putting the text-input inside the label for the checkbox, but it doesn't work. It works fine when I use normal text instead of the input-field:
<input type="checkbox" id="box">
<label for="box">
<input type="text">
</label>
How can I achieve this with HTML/JS? I'm working in the context of a VueJS plugin.

The click action of <input> (focus & start editing) overrides <label>'s, so you'll have to use JS:
document.querySelector('#text').addEventListener('click', ()=>{
document.querySelector('#box').checked=true
})
<input type="checkbox" id="box">
<input type="text" id="text">

you can use jquery to achieve this:
HTML:
<input type="checkbox" id="box">
<label for="box"></label>
<input type="text" id="mytextinput">
JQuery:
$('#mytextinput').focus(function(){
$('#box').prop( "checked", true ); // true checks the checkbox false unchecks.
});

Simply add a listener to the text input that checks the box.
const checkbox = document.querySelector('#box');
const input = document.querySelector('input[type="text"]');
input.addEventListener('click', () => {
checkbox.checked = true;
});
<input type="checkbox" id="box">
<label for="box">
<input type="text">
</label>

You can do this easily by setting an onclick attribute on text field like:
<input type="checkbox" id="box">
<label for="box">
<input type="text" onclick="box.checked = true">
</label>

document.querySelector("#box").addEventListener('click',function(){
document.querySelector("#checkbox").checked = true;
});
<div>
<input type="checkbox" id="checkbox">
<input type="text" id="box">
</div>

alert multiple checkbox values

i am submitting data through FormData and i am trying to alert values of check boxes which are checked in my form, right now i am able to make it work for only one check box.
how can i alert values of all those check boxes which are checked.
var formData = new FormData(document.getElementById("update-form"));
$("#myCheckbox1").on('change',function(){
if($("#myCheckbox1").is(':checked'))
$('#hiddenInput1').val(1);
else{
$('#hiddenInput1').val(0);
}
});
alert(
$('#hiddenInput1').val()
);
Check Box 1:
<input type="hidden" value="0" name="visa" id="hiddenInput1">
<input type="checkbox" value="1" id="myCheckbox1">
Example Check Box 2:
<input type="hidden" value="0" name="visa1" id="hiddenInput2">
<input type="checkbox" value="1" id="myCheckbox2">
How to Alert Values of all check boxes which are checked in FormData without repeating code. i found similar example online but none were using FormData.
Form Name is : update-form

You can make use of start with attribute selector to select all checkboxes having id start with myCheckbox and attach it to change event handler.
Inside handler, you can read if checkbox is checked or not and change value of hidden input which is placed before checkbox.
See below code
$(function(){
$("input[type=checkbox][id^=myCheckbox]").on('change',function(){
var isChecked = $(this).is(':checked');
var $hiddenInput = $(this).prev('input[type=hidden]');
if(isChecked)
$hiddenInput.val(1);
else{
$hiddenInput.val(0);
}
alert($hiddenInput.val());
});
//iterate all hidden input on form submit
$('#update-form').submit(function(){
$('input[id^=hiddenUnput]').each(function(){
alert($(this).val());
});
$(this).submit();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Exammple Check Box 1:
<input type="hidden" value="0" name="visa" id="hiddenInput1">
<input type="checkbox" value="1" id="myCheckbox1">
Example Check Box 2:
<input type="hidden" value="0" name="visa" id="hiddenInput2">
<input type="checkbox" value="1" id="myCheckbox2">

Read Only Text Column With Checkbox

I made a very easy one HTML input column. I added JavaScript to it with a checkbox in it.
When I clicked check box checked I want write the text or unchecked the text box read only how to solve my problem. Give for example for my code
<input type="text" id="inputID" value="abc"></input>
<input type="checkbox" id="myCheck" checked>
<script>
document.getElementById('inputID').readOnly = true;
</script>

Add an event listener to the change event on the checkbox.
<input type="text" id="inputID" value="abc" readonly></input>
<input type="checkbox" id="myCheck" >
<script>
var checkbox = document.getElementById('myCheck');
checkbox.addEventListener('change', function() {
document.getElementById('inputID').readOnly = !this.checked;
});
</script>
Working fiddle

How to combine an radio input with a text input

I'm trying to build a combined radio / text input for an "other" field in a form.
<input id="artist" type="radio" name="artist" value="Other">
<input id="other-artist" type="text" name="other_artist" placeholder="Other Artist"/>
I can't figure out how to click inside the text input and have the radio selected. I tried wrapping the text input in a label but that did not work.

you can add a onclick event to de input and check the radio like this.
<input id="artist" type="radio" name="artist" value="Other">
<input id="other-artist" type="text" name="other_artist"placeholder="Other Artist"
onClick="selectRadio()" />
and the js
selectRadio = () => {
var radio = document.getElementById("artist");
radio.checked = true;
}
example
hope this help.