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
Related
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>
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">
In my HTML, I have a lot of checkboxes.
<input type="checkbox"> Check me!
<input type="checkbox"> Check me as well!
<input type="checkbox"> Check me too!
<input type="checkbox"> This is a checkbox.
<input type="checkbox"> It is not a radio button.
<input type="checkbox"> Just saying.
(Even more checkboxes ..............)
Without jQuery, how do I create an alert once any checkbox in the document is changed?
(With so many checkboxes, it will be very troublesome to add onclick="alert('Hello!');" on every single checkbox.)
This is how you would do it without jQuery:
// get all the checkboxes on the page
var checkboxes = document.querySelectorAll('input[type=checkbox]');
// add a change event listener
for(var i = 0; i < checkboxes.length; i++) {
checkboxes[i].addEventListener('change', function(){
console.log('the checkbox changed');
});
}
Note: document.querySelectorAll is not supported in IE7 or below.
http://caniuse.com/queryselector
Clicks are bubbling through the document, you could use a single eventlistener for the parent element of these inputs. Something like this:
<form id="form">
<input type="checkbox"> Check me!
<input type="checkbox"> Check me as well!
<input type="checkbox"> Check me too!
<input type="checkbox"> This is a checkbox.
<input type="checkbox"> It is not a radio button.
<input type="checkbox"> Just saying.
</form>
JS:
document.getElementById('form').addEventListener('click', function (e) {
if (e.target.type === 'checkbox') {
alert('Checkbox');
}
});
If you don't have a form or any other common parent element (and you don't want to add a one), you can add the listener to the document as well.
A live demo at jsFiddle.
you can do like this :
HTML:
<form id="form">
<input type="checkbox" name="checkbox" /> Check me!
<input type="checkbox" name="checkbox"/> Check me as well!
<input type="checkbox" name="checkbox"/> Check me too!
<input type="checkbox" name="checkbox"/> This is a checkbox.
<input type="checkbox" name="checkbox"/> It is not a radio button.
<input type="checkbox" name="checkbox"/> Just saying.
</form>
JS:
var cbobject= document.forms[0].elements.checkbox;
for (var i=0, len=cbobject.length; i<len; i++) {
if ( cbobject[i].type === 'checkbox' ) {
cbobject[i].onclick = show_alert;
}
}
function show_alert(e){
alert("checkbox!!!")
}
DEMO:
I have a group of radio buttons and a single text input field. When I click on the text input the radio buttons become unchecked using JavaScript, but when I type something into the form field and then reselect a radio button I can not get the text to be deleted. Here is my code so far, If someone could help me get the text box to clear all input when I select a radio I know im close.
<input type="radio" id="radio1" name="radios" checked>
<label for="radio1">$10</label>
<input type="radio" id="radio2" name="radios" >
<label for="radio2">$25</label>
<input type="radio" id="radio3" name="radios" >
<label for="radio3">$50</label>
<input type="radio" id="radio4" name="radios" >
<label for="radio4">$100</label>
<input type="text" id="textInput">
<script>
<!-- to remove radio on text input click-->
$('#textInput').click(function () {
$.each($('input[type=radio]'), function () {
$(this).removeAttr("checked");
});
});
<!-- to remove text on text radio button click-->
$('input[type=radio]').click(function () {
$.each($('#textInput'), function () {
$(this).removeAttr("input");
});
});
</script>
Just remove their value using val(). input isn't an attribute, it's a tag name.
$.each($('#textInput'), function () {
$(this).val("");
Just use .val(), also you don't need $.each
$('input[type=radio]').click(function () {
$('#textInput').val('');
});
You have to use .val("") to set the text box value to empty.
Try this,
$('#textInput').each(function () {
$(this).val("");
});
Page code as below:
<input type="radio" class="direct" name="r1" value="first" />
<span class="proxy">radio1</span>
<input type="radio" class="direct" name="r1" value="second" />
<span class="proxy">radio2</span>
js code as below:
$('.direct').click(function(e) {
var obj = $(this).parent(),
value = obj.find('input:checked').val();
if(value){
alert('you click ' + value + ' button');
}else{
alert('you did not click a button');
}
});
$('.proxy').click(function(e) {
$(this).prev().click();
});
Here is the example on JSFiddle
My question is:
why clicking on span text does not work like clicking directly on radio button?
As i said earlier, question was not clear, at least for me. however, if you want to get the radio checked when clicked on next span, you can do this way:
$('.proxy').click(function(e) {
$(this).prev().attr('checked', true)
});
If you use a label with for attribute set to the correct input, you could avoid all this problem.
<input type="radio" class="direct" name="r1" id="r11" value="first"/>
<label class="proxy" for="r11">radio1</label>
<input type="radio" class="direct" name="r1" id="r12" value="second"/>
<label class="proxy" for="r12">radio1</label>
DEMO