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');
}
})

multiple checkboxes at least 1 required in html 5

I want as HTML error message rather than an alert message, I've found few solutions but none are not working as hoped
$('form').on('click', '.required_group', function() {
$('input.required_group').prop('required', $('input.required_group:checked').length === 0);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type="checkbox" name="whatever" value="1" required class="required_group" />
<input type="checkbox" name="whatever" value="2" required class="required_group" />
<input type="checkbox" name="whatever" value="3" required class="required_group" />
<input type="checkbox" name="whatever" value="4" required class="required_group" />
<input type="submit" name="submit" />
</form>

$('form').on('click', '.required_group', function() {
var flag=false;
$('.required_group').each(function(e){
if (this.checked) {
flag=true;
}
});
if(!flag){
// Do your code for Error Message
}
});

Here is a method with a custom error message.
It looks at everything with the class required_group and counts every instance where it is checked. If the number is 0 it sets a custom message and triggers it, however, if there is one or more it will reset the message and trigger a submit.
function validateGrp() {
let things = document.querySelectorAll('.required_group')
let checked = 0;
for (let thing of things) {
thing.checked && checked++
}
if (checked) {
things[things.length - 1].setCustomValidity("");
document.getElementById('checkGroup').submit();
} else {
things[things.length - 1].setCustomValidity("You must check at least one checkbox");
things[things.length - 1].reportValidity();
}
}
document.querySelector('[name=submit]').addEventListener('click', () => {
validateGrp()
});
<form id="checkGroup">
<input type="checkbox" name="whatever" value="1" class="required_group" />
<input type="checkbox" name="whatever" value="2" class="required_group" />
<input type="checkbox" name="whatever" value="3" class="required_group" />
<input type="checkbox" name="whatever" value="4" class="required_group" />
<button name="submit">Submit</button>
</form>

JQUERY: Change value from text input having a checkbox selected

I need to change the value of a text input only if a checkbox is selected. Both inputs (text and checkbox) have the same class:
<label for="text_to_apply">Write your text: </label>
<input type="text" id="text_to_apply" name="text_to_apply" value="">
<button type="button" id="btn_apply">Change</button>
<form id="theform">
<input type="text" value="1" id="one1" class="one"><input type="checkbox" id="one1_" class="one"><br>
<input type="text" value="1" id="one2" class="one"><input type="checkbox" id="one2_" class="one"><br>
<input type="text" value="1" id="one3" class="one"><input type="checkbox" id="one3_" class="one"><br>
<input type="text" value="1" id="one4" class="one"><input type="checkbox" id="one4_" class="one"><br>
<input type="text" value="2" id="two1" class="two"><input type="checkbox" id="two1_" class="two"><br>
</form>
</div>
<script>
$('#btn_apply').click(function() {
var mytext = $('#text_to_apply').val();
if ($('#theform').find('.one input:checked')) {
$('#theform').find('.one:text').attr('value', mytext);
}
});
</script>
</body>
I am running out of ideas. Please Help!
Thanks!!

If I got your question right - it will look like this:
$('#btn_apply').click(function() {
if ($('#yourCheckboxId').is(':checked')){
$('#inputId').val('some text you want');
}
});
Here is fiddle http://jsfiddle.net/Goodluck/2XBcK/

Try
$('#btn_apply').click(function() {
var mytext = $('#text_to_apply').val();
$('#theform').find('input:checked').each(function(){
$(this).prev().val(mytext);
});
});
DEMO

There is no :text in jQuery that I'm aware of. Presuming your HTML stays the same, you can use the .prev() method to target the input before each input:checked.
$('#btn_apply').click(function() {
var mytext = $('#text_to_apply').val();
if ($('#theform').find('input:checked')) {
$('#theform').find('input:checked').prev('input').attr('value', mytext);
}
});
Fiddle: http://jsfiddle.net/willthemoor/5qmH8/

disable select form if radio is checked

How can I disable a select form dropdown if a radio button is selected?
I would like the #preference form to be disabled if the user selects the #no radio button and it to be enabled again if the user selects #yes or #maybe.
This is my form code -
<form name="xmas" id="xmas" action="send_mail.php" method="post">
<input type="radio" name="choice" value="Yes" id="yes"/><label for="yes">Yes - I would like to take up the offer</label>
<input type="radio" name="choice" value="No" id="no"/><label for="no">No - I'm not ready to order yet</label>
<input type="radio" name="choice" value="Maybe" id="maybe"/><label for="maybe">Maybe - I'm not sure, would you please give me a call</label><br />
<div class="secondlineform">
<input type="text" name="name" class="textfield" value="Name" onfocus="if(this.value=this.defaultValue){this.value=''}; return false;"/>
<input type="text" name="email" class="textfield" value="Email" onfocus="if(this.value=this.defaultValue){this.value=''}; return false;"/>
<input type="text" name="company" class="textfield" value="Company" onfocus="if(this.value=this.defaultValue){this.value=''}; return false;"/>
<select class="dropselect" name="preference" label="Preference" id="preference">
<option selected="selected" disabled="disabled" value="Preference">Preference</option>
<option value="Alcohol Package">Alcohol Package</option>
<option value="Gift Card Package">Gift Card Package</option>
</select>
<input type="submit" value="" name="submit" id="submit" class="submit"/>
</div>
</form>
And this is my script code -
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
​
var update_select = function () {
if ($('#no').is(':checked')) {
$('#preference').attr('disabled', "disabled");
}
else {
$("#preference").removeAttr("disabled");
}
};
$(update_select);
$('#no').change(update_select);
</script>
Thanks very much for any answers! I've been researching this for ages and all the solutions I find don't seem to solve my issue.

you are adding change event for only No radio, change it to :
$("input[name='choice']").change(update_select);
Demo:: jsFiddle

$('input[type=radio]').change(update_select);​

You need to apply the update_select function to the rest of the radio button,like this
var update_select = function () {
$('#preference').attr('disabled', $('#no').is(':checked'));
};
$('#no').change(update_select);
$('#yes').change(update_select);
$('#maybe').change(update_select);
Here is the fiddle: http://jsfiddle.net/QXkhM/

Wrap your radio button list by an ul and give it an ID.
For example:
<ul id="offer">
<input type="radio" name="choice" value="Yes" id="yes"/><label for="yes">Yes - I would like to take up the offer</label>
<input type="radio" name="choice" value="No" id="no"/><label for="no">No - I'm not ready to order yet</label>
<input type="radio" name="choice" value="Maybe" id="maybe"/><label for="maybe">Maybe - I'm not sure, would you please give me a cal
l</label><br />
</ul>
var update_select = function () {
if ($('#no').is(':checked')) {
$('#preference').attr('disabled', "disabled");
}
else {
$("#preference").removeAttr("disabled");
}
};
$(update_select);
$('#offer').change(update_select);
And it will work

Checking label text and verifying that input field tied to it has at least x amount characters

I'm super new to this language. I have the ability to check for the label sting but I want to make sure that the input field next to it has at least 6 digits (numerical if possible)
$(document).ready(function(){
$("label:contains('6 digit')") //i get lost here
});
Markup:
<form>
<label>Test</label><input value="1" type="text" class="check">
<label>Test</label><input value="1" type="text" class="check">
<label>Test</label><input value="1" type="text" class="check">
<label>6 digit</label><input value="1" type="text" class="check">
<label>6 digit</label><input value="1" type="text" class="check">
<label>Test</label><input value="1" type="text" class="check">
<input type="submit">
</form>

Tim Bolton got it almost right, though he is checking if the value is lower than 5, he is not testing the number of digits. i would do it like this:
function isValidForm(){
var labels = $('form labels');
$(labels).each(function(){
var inputText = $(this).next();
if($(inputText).val().length < 6 || isNaN($(inputText).val())) {
$(inputText).css('color', 'red'); // you can do whatever you want to show the field is not properly filled
return false;
}
})
return true;
}
then, on form submission, all you have to do is:
$('form').submit(function(){
if(!isValidForm()){
alert('please fix the errors');
return false;
}
});

You're going to want to set the for attribute on your label's. You'll also want to set an ID for the inputs for the label to recognize. That should arm you with the proper hooks to do what you want (or at least be set up appropriately).
With your current setup, try:
<script>
$(document).ready(function(){
$('#submit').click(function(event) {
event.preventDefault();
$('label').each(function() {
var len = $(this).next().length;
if(len < 5) {
alert('Too Short!');
} else { $('#form').submit();
});
})
});
</script>
<form id="form">
<label>Test</label><input value="asdfassd1" type="text" class="check">
<label>Test</label><input value="1" type="text" class="check">
<label>Test</label><input value="1" type="text" class="check">
<label>6 digit</label><input value="1" type="text" class="check">
<label>6 digit</label><input value="1" type="text" class="check">
<label>Test</label><input value="1" type="text" class="check">
<input type="submit" id="submit">
</form>

The purpose of a label is to be associated with a form-related element via an id:
<label for="digits">Enter Digits</label>
<input type="text" id="digits" />
See documentation for label. Given that all your inputs should have an id if they have a label, try the following:
$('#inputID').each(function() {
if (!$(this).val().match(/^\d{6,}$/)) {
alert('incorrect formatting!');
}
});
which tests the value of the selected input against a regular expression for "all digits, at least six".
jsFiddle demo
I think regular expressions are the most concise and portable way of validating simple inputs.

If at all possible, find an easy way to distinguish the fields you need to validate, like Tim Bolton suggested with ID attributes on the elements, or perhaps by CSS Classes like below (i.e., the "needs6" class):
<form>
<label>Test</label><input value="1" type="text" class="check">
<label>Test</label><input value="1" type="text" class="check">
<label>Test</label><input value="1" type="text" class="check">
<label>6 digit</label><input value="1" type="text" class="check needs6">
<label>6 digit</label><input value="1" type="text" class="check needs6">
<label>Test</label><input value="1" type="text" class="check">
<input type="submit" />
</form>
Then your jQuery selector becomes much simpler (i.e., $("input.needs6")).
Once you have your inputs selected, there are many ways to validate them.
Personally, I would use the following method:
$(document).ready(function() {
var testFor6 = function () {
var allHave6 = true;
$("input.needs6").each(function () {
var input = $(this);
var value = input.val();
if (!value.match(/\d{6}/g)) {
allHave6 = false;
input.addClass('doesNotHave6');
} else {
input.removeClass('doesNotHave6');
}
});
return allHave6;
};
$('input[type="submit"]').click(function (e) {
var allHave6 = testFor6();
if (!allHave6) {
e.preventDefault(); //Cancel event-bubbling.
}
return allHave6; //Prevent form submission when false.
});
});
If you want to see this in action, pop it into http://jsfiddle.net/ and test it, although you may want to combine this with some sample CSS classes to see it working. Samples below.
.needs6 {background-color: yellow;}
.doesNotHave6 {background-color: red;}
Hope this helps,
Pete
Addendum:
Do you mean spaces...
<form>
<label>Test</label><input value="1" type="text" class="check">
<label>Test</label><input value="1" type="text" class="check">
<label>Test</label><input value="1" type="text" class="check">
<!-- here? --><label><!-- here? -->6 digit</label><!-- here? --><input value="1" type="text" class="check needs6" value="<!-- here? -->">
<label>6 digit</label><input value="1" type="text" class="check needs6">
<label>Test</label><input value="1" type="text" class="check">
<input type="submit" />
</form>
Please clarify.
Certainly!
Simply change the input loop function to any portion of the following...
$("input.needs6").each(function () {
var input = $(this);
var value = input.val();
//You can use this to trim.
var trimmedValue = value.replace(/\s\s*$/, '').replace(/^\s\s*/, '');
//You can use this to find leading whitespace.
var hasLeadingSpaces = value.match(/^\s\s*/, '');
//You can use this to find trailing whitespace.
var hasTrailingSpaces = value.match(/\s\s*$/, '');
if (hasLeadingSpaces) {
//Do something
}
if (hasTrailingSpaces) {
//Do something
}
//Check original value
if (!value.match(/\d{6}/g)) {
allHave6 = false;
input.addClass('doesNotHave6');
} else {
input.removeClass('doesNotHave6');
}
//Check trimmed value
if (!trimmedValue.match(/\d{6}/g)) {
allHave6 = false;
input.addClass('doesNotHave6');
} else {
input.removeClass('doesNotHave6');
}
});