We Keep Coding

How to get checkbox value checked and show to input element using Javascript or Jquery?

but the value is only displayed when I click on the checkbox and it does not display the pre-selected values, I want it to show the selected results even if I do not click the checkbox, please correct this code Help me or give me some example code so I can add, thank you!
<script type="text/javascript">
function thayTheLoai() {
var huunhan_theloai = [];
$.each($("input[type='checkbox']:checked"), function() {
huunhan_theloai.push($(this).val());
});
document.getElementById("input").value = huunhan_theloai.join(", ");
}
</script>
<label for="default" onclick="thayTheLoai();" class="btn btn-default">
<input type="checkbox" value="1" id="theloai1" class="badgebox" name="theloai[]" ></input>
</label>
<input id="input" type="text"></input>
<script>
$('#theloai1').prop('checked', true);
</script>
This is demo : https://anifast.com/includes/test.php, I want to not need to click the checkbox and still display the checked results

Use this code and don't forget to use jquery library.
$(document).ready(function(){
$('#theloai1').prop('checked', true);
var huunhan_theloai = [];
$.each($("input[type='checkbox']:checked"), function() {
huunhan_theloai.push($(this).val());
});
document.getElementById("input").value = huunhan_theloai.join(", ");
})
function thayTheLoai() {
if ($('input[name="theloai[]"]:checked').length > 0) {
$("#input").val(1);
}else{
$("#input").val(0);
}
}

You have 2 ways of doing it:
you update the input field from your PHP and MySQL to have the checked="checked" on the selected input fields and the run the function on load:
JS
function thayTheLoai() {
var huunhan_theloai = [];
$.each($("input[type='checkbox']:checked"), function() {
huunhan_theloai.push($(this).val());
});
$('#input').val( huunhan_theloai.join(", ") );
}
$(document).ready(function(){
thayTheLoai();
});
HTML
<label for="theloai1" onclick="thayTheLoai();" class="btn btn-default">
<input type="checkbox" value="1" id="theloai1" class="badgebox" name="theloai[]" />
</label>
<label for="theloai2" onclick="thayTheLoai();" class="btn btn-default">
<input type="checkbox" value="2" id="theloai2" class="badgebox" name="theloai[]" checked="checked" />
</label>
<input id="input" type="text"/>
if you want to update the input field using the $('#theloai1').prop('checked', true);, you should change it so that it also triggers the onchanged event on the input field like this:
$('#theloai1').prop('checked', true).trigger('change');
NOTES
this code is not tested, but it should work
make sure you write valid HTML otherwise you might get unexpected results (I fixed your HTML as well)

<label for="default" class="btn btn-default">
<input type="checkbox" value="1" id="theloai1" class="badgebox" name="theloai[]" ></input>
<input type="checkbox" value="2" id="theloai2" class="badgebox" name="theloai[]" ></input>
<input type="checkbox" value="3" id="theloai3" class="badgebox" name="theloai[]" ></input>
<input type="checkbox" value="4" id="theloai4" class="badgebox" name="theloai[]" ></input>
</label>
<input id="input" type="text"></input>
$(document).ready(function(){
$('#theloai1').prop('checked', true);
var huunhan_theloai = [];
$.each($("input[type='checkbox']:checked"), function() {
huunhan_theloai.push($(this).val());
});
document.getElementById("input").value = huunhan_theloai.join(", ");
})
$("input[type='checkbox']").on("change", function(){
checked_id = $(this).attr("id");
if ($(this).prop("checked") == true) {
$("input[type='checkbox']").each(function(){
if ($(this).attr("id") != checked_id) {
$(this).prop("checked", false);
}
})
$("#input").val($(this).val());
}else{
$("#input").val('some default value');
}
})

display the text with clicking on check box

I want to write the two names with check boxes and want to show the text in console.log with checking the check boxes in java script.
i have tried this
but its not working
<p>Pakistan <input type="checkbox" id="mycheck" onclick="myFunction()"></p>
<p>India <input type="checkbox1" id="mycheck" onclick="myFunction"></p>
<script>
function myFunction() {
var checkbox = document.getElementById("mycheck")
if (checkBox.checked == true) {
console.log("Pakistan")
}
}
</script>

your checkbox.check has a capital b whereas your declaration has lowercase
<p>Pakistan <input type="checkbox" id="mycheck" onclick="myFunction()"></p>
<p>India <input type="checkbox1" id="mycheck" onclick="myFunction"></p>
<script>
function myFunction(){
var checkbox = document.getElementById("mycheck")
if (checkbox.checked == true){
console.log("Pakistan")
}
}
</script>

Best way to do this would be adding this to your onclick function, which will reference the checkbox for clicked element. You can then check if the checkbox is checked and print out the text of the parent element to get the "checkbox name"
Also make sure that you have type = "checkbox" not checkbox1, that is not a correct type. You also want to avoid duplicate ids, change id="mycheck" to a class or name them differently.
working snippet:
<p>Pakistan <input type="checkbox" id="mycheck1" onclick="myFunction(this)"></p>
<p>India <input type="checkbox" id="mycheck2" onclick="myFunction(this)"></p>
<script>
function myFunction(box) {
if (box.checked == true) {
console.log(box.parentElement.textContent)
}
}
</script>

Firstly, IDs are unique, so pass this into the function and check if it's checked - then console.log the text inside the parent:
function myFunction(checkbox) {
if (checkbox.checked) {
console.log(checkbox.parentNode.textContent);
}
}
<p>Pakistan <input type="checkbox" onclick="myFunction(this)"></p>
<p>India <input type="checkbox" onclick="myFunction(this)"></p>

function myFunction(chbx) {
if(chbx.checked == true) {
console.log(chbx.parentElement.textContent);
}
}
<p>Pakistan <input type="checkbox" onclick="myFunction(this)"></p>
<p>India <input type="checkbox" onclick="myFunction(this)"></p>

How do I disable textarea on checkbox click?

How do I disable the textarea onclick of the checkbox?
<p>What caused the damage?</p>
<textarea rows="5"></textarea>
<input type="checkbox">
<label>I don't know</label>

This code should work as what you intend to achieve.
$('#checkbox').on('click', function(){
if($("#checkbox").is(":checked")){
$('#textArea').val('');
$('#textArea'). attr('disabled','disabled');
}else{
$('#textArea').removeAttr('disabled');
}
}
);

Using the disabled property of a <textarea> liike <textarea disabled>.
let checker = document.getElementById("checker");
let textInput = document.getElementById("textInput");
checker.addEventListener('click', () => textInput.disabled = checker.checked);
<p>What caused the damage?</p>
<textarea id="textInput" rows="5"></textarea>
<input type="checkbox" id="checker">
<label>I don't know</label>

The HTML Markup consists of a CheckBox and a TextBox which is by default disabled using the disabled attribute. The CheckBox has been assigned a JavaScript OnClick event handler.
When the CheckBox is clicked, the EnableDisableTextBox JavaScript function is executed. Inside this function, based on whether CheckBox is checked (selected) or unchecked (unselected), the TextBox is enabled or disabled by setting the disabled property to false or true respectively.
<script type="text/javascript">
function EnableDisableTextBox(chkPassport) {
var txtPassportNumber = document.getElementById("txtPassportNumber");
txtPassportNumber.disabled = chkPassport.checked ? false : true;
if (!txtPassportNumber.disabled) {
txtPassportNumber.focus();
}
}
</script>
<label for="chkPassport">
<input type="checkbox" id="chkPassport" onclick="EnableDisableTextBox(this)" />
Do you have Passport?
</label>
<br />
Passport Number:
<input type="text" id="txtPassportNumber" disabled="disabled" />

var textArea = document.querySelector('#text-area');
var checkbox = document.querySelector('#cbox');
function toggleTextArea() {
var disabled = textArea.getAttribute('disabled');
if (disabled) {
textArea.removeAttribute('disabled');
} else {
textArea.setAttribute('disabled', 'disabled');
}
}
checkbox.addEventListener('click', toggleTextArea);
<p>What caused the damage?</p>
<textarea rows="5" id="text-area"></textarea>
<input type="checkbox" id="cbox">
<label for="cbox">I don't know</label>

I just added a JavaScript that selects the text area and enable and disable it based on what your checkbox
<script>
var flagChk = document.getElementById("chk");
function disableBox(){
document.getElementById("myTextArea").disabled = chk.checked;
document.getElementById("myTextArea").enabled = chk.unchecked;
}
</script>
<p>What caused the damage?</p>
<textarea rows="5" id="myTextArea"></textarea>
<input type="checkbox" onclick="disableBox()" id="chk">
<label>I don't know</label>

$('#checker').click(function(){
if($("#checker").is(":checked")){
$('#textInput').attr('disabled',true).val("");
}else{
$('#textInput').attr('disabled',false);
}
});

Choosing among radio buttons and Text Field

I have 2 radio buttons. All of them have different values. I also have one text field, in case I need a different value, I can enter that value on that text field.
<form action="" onsubmit="return doSubmit(this)">
<input type="radio" name="url" value="https://example.com/fee/25"> $25
<input type="radio" name="url" value="https://example.com/fee/50"> $50
<input type="submit" value="Submit">
</form>
and here is the Javascript I've found to make radio buttons working
<script type="text/javascript">
function doSubmit(form) {
var urls = form['url'];
var i = urls && urls.length;
while (i--) {
if (urls[i].checked) {
window.location = urls[i].value;
}
}
document.getElementById("amount").value;
return false;
}
</script>
I have one text field:
<input type="text" name="amount" size="10" id="amount" value="">
Ok. If the amount is entered, then I need to use this code:
document.getElementById("amount").value
But how to make it working with radio buttons? I have created this JS code:
<script type="text/javascript">
var link = "https://example.com/fee/";
var input= document.getElementById('amount');
input.onchange=input.onkeyup= function() {
link.search= encodeURIComponent(input.value);
};
</script>
What I'm doing wrong? Thanks in advance for your time. I love and enjoy learning from experts.

I would create a separate radio button for the text input:
var options = Array.from(document.querySelectorAll("[name=url]"));
amount.addEventListener('focus', function() {
options[0].checked = true; // If textbox gets focus, check that radio button
});
options[0].addEventListener('change', function() {
amount.focus(); // if first radio button gets checked, focus on textbox.
});
function doSubmit(form) {
// get checked value, replace empty value with input text
var value = options.find( option => option.checked ).value || amount.value;
window.location = "https://example.com/fee/" + value;
return false;
};
<form action="" onsubmit="return doSubmit(this)">
<input type="radio" name="url" value="" checked>
$<input type="text" name="amount" size="5" id="amount" value="" >
<input type="radio" name="url" value="25"> $25
<input type="radio" name="url" value="50"> $50
<input type="submit" value="Submit">
</form>

Instead of using the url as the value for the radio buttons, consider using the value you wish to pass to the url:
function doSubmit(form) {
var endpoint = "https://example.com/fee/";
// gets the values of input elements that were selected
var checkedValues = Array.from(form.amounts)
.filter(radio => radio.checked)
.map(radio => radio.value);
// if a radio button was checked, use its value
// otherwise, use the value in the text field
var amount = checkedValues.length ?
checkedValues[0] : form.amount.value;
console.log('redirecting to: ', endpoint + amount);
return false;
}
// uncheck radio buttons when text is entered
function uncheck() {
Array.from(document.querySelectorAll('input[name="amounts"]'))
.forEach(radio => radio.checked = false);
}
<form action="" onsubmit="return doSubmit(this)">
<input type="radio" name="amounts" value="25"> $25
<input type="radio" name="amounts" value="50"> $50
<input type="text" name="amount" onkeyup="uncheck()">
<input type="submit" value="Submit">
</form>
Edit: Wow I completely forgot you could use the :checked attribute as a css selector. In this case, the code becomes quite simple:
function doSubmit(form) {
// select checked inputs with the specified name attribute
var checkedRadio = document.querySelector('input[name="amounts"]:checked')
// if we have a radio button that is checked, use its value
// otherwise, use the text input's value
var amount = checkedRadio ? checkedRadio.value : form.amount.value;
window.location = 'https://example.com/fee/' + amount;
return false;
}
// uncheck radio buttons when text is entered
function uncheck() {
Array.from(document.querySelectorAll('input[name="amounts"]'))
.forEach(radio => radio.checked = false);
}
<form action="" onsubmit="return doSubmit(this)">
<input type="radio" name="amounts" value="25"> $25
<input type="radio" name="amounts" value="50"> $50
<input type="text" name="amount" onkeyup="uncheck()">
<input type="submit" value="Submit">
</form>

display the value of all selected radio buttons on a form

I have multiple radio buttons generated in a php loop which looks something like this
while(){
<input type="radio" id="picks'.$x.'" name="picks['.$x.']" value="'.$row['team1'].' " onclick="return disp()""><span>'.$team1.'</span>
<input type="radio" id="picks'.$x.'" name="picks['.$x.']" value="'.$row['team2'].' "onclick="return disp()""><span>'.$team2.'</span>
<input type="radio" name="picks'.$x.'" value="draw" onclick="return disp()">
}
What I want to do
Display all selected radio buttons in a div on the bottom of page
My Code
var elmnts = document.getElementById("makePicksForm").elements
var lngth = document.getElementById("makePicksForm").length;
var div = document.getElementById("dispPicks");
for (var x = 0; x < lngth; x++) {
if (elmnts[x].type == "radio" && elmnts[x].checked == true) {
div.innerHTML = elmnts[x].value;
}
}
My Problem
Only the value of first selected radio button is displayed in div, other radio buttons are ignored
My Question
Any idea how I can modify my javascript to display the values of ALL selected radio buttons?

Since you've tagged your question with jQuery, here is a jQuery solution. Run the snippet to see it work:
$(document).ready(function () {
$(':radio').change(function (e) {
//clear the div
$('#dispPicks').html('');
//update the div
$(':radio:checked').each(function (ind, ele) {
$('#dispPicks').append($(ele).val() + '<br/>');
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="radio" name="foo" value="foo1" />
<input type="radio" name="foo" value="foo2" />
<input type="radio" name="foo" value="foo3" />
<br/>
<input type="radio" name="bar" value="bar1" />
<input type="radio" name="bar" value="bar2" />
<input type="radio" name="bar" value="bar3" />
<br/>
<input type="radio" name="wow" value="wow1" />
<input type="radio" name="wow" value="wow2" />
<input type="radio" name="wow" value="wow3" />
<div id="dispPicks"></div>

You're using lngth in your for loop, but that's defined by getting an element by ID which should only be 1 element. Your loop will only run once that way...
Assuming the element with ID makePicksForm contains all your radio buttons, you need to get the length of the elements:
var elmnts = document.getElementById("makePicksForm").elements;
var div = document.getElementById("dispPicks");
for (var x = 0; x < elmnts.length; x++) {
if (elmnts[x].type == "radio" && elmnts[x].checked == true) {
div.innerHTML += elmnts[x].value;
}
}
Also, you need to add the value to the innerHTML property, using +=
as a side note: your PHP loop is creating duplicate ID's, which will result in failures in your javascript code if you need to reference the elements...

Another jQuery-Fiddle
<input type="radio" id="bob" name="boys" value="Bob"><label for="bob">Bob</label><br>
<input type="radio" id="jim" name="boys" value="Jim"><label for="jim">Jim</label><br>
<input type="radio" id="pete" name="boys" value="Pete"><label for="pete">Pete</label><br>
<input type="radio" id="mary" name="girls" value="Mary"><label for="mary">Mary</label><br>
<input type="radio" id="jane" name="girls" value="Jane"><label for="jane">Jane</label><br>
<input type="radio" id="susan" name="girls" value="Susan"><label for="susan">Susan</label>
<h3><span id="boy">?</span> and <span id="girl">?</span></h3>
$("input[name=boys]").click(function () {
$("#boy").text($(this).val());
});
$("input[name=girls]").click(function () {
$("#girl").text($(this).val());
});