We Keep Coding

How to select/unselect select options with checkboxes with JavaScript / jQuery?

I have almost no knowledge of JavaScript or jQuery.
I need to select/unselect an option in a <select> where multiple options can be selected when a checkbox or button is clicked.
The checkbox needs to select/unselect the option with the same value.
My idea was something like this:
$(document).ready(function() {
var input = $('#entry-select');
var checkboxes = $('.entrycheckbox');
checkboxes.click(function() {
var element = $(this);
var value = element.val();
input.val(value);
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" class="entrycheckbox" value="1">
<input type="checkbox" class="entrycheckbox" value="2">
<input type="checkbox" class="entrycheckbox" value="3">
<form action="">
<select name="entries" id="entry-select" multiple>
<option value="1">Option1</option>
<option value="2">Option2</option>
<option value="3">Option3</option>
</select>
</form>
This only selects the option with the value of the last clicked checkbox, not which ones are checked, and it unselects every other option.

You only give val() the value of the checkbox which was selected last. To make this work as you require you need to build an array of all selected checkboxes and provide that to val() instead.
To achieve this you can use filter() to get the selected checkboxes, then map() to build the array:
input.val(checkboxes.filter(':checked').map((i, el) => el.value));
$(document).ready(function() {
var $input = $('#entry-select');
var $checkboxes = $('.entrycheckbox');
$checkboxes.click(function() {
$input.val($checkboxes.filter(':checked').map((i, el) => el.value));
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" class="entrycheckbox" value="1">
<input type="checkbox" class="entrycheckbox" value="2">
<input type="checkbox" class="entrycheckbox" value="3">
<form action="">
<select name="entries" id="entry-select" multiple>
<option value="1">Option1</option>
<option value="2">Option2</option>
<option value="3">Option3</option>
</select>
</form>
You may also want to consider adding readonly to the select if you don't want the user to change the selected option directly.

<script type="text/javascript">
$(document).ready(function(){
$('.entrycheckbox').click(function(){
$(":entrycheckbox").each(function(){
if($(this).val()==1){
$(this).attr("checked","checked");
}
});
});
});
</script>

get selected checked value from patosai tree multiselect

Im trying to get value from checkbox that has been checked, but for some reason the value is shuffled in some weird pattern
here jsfiddle (try to check fruit and then click disable)
<input id="checkedTree" type="text"/>
<select id="test-select" onchange="getCheckedTree()">
<option value="1" data-section="fruit">Banana</option>
<option value="2" data-section="fruit">Apple</option>
<option value="3" data-section="fruit">Avocado</option>
<option value="4" data-section="fruit">Pineapple</option>
<option value="5" data-section="fruit">PenPineappleApplePen</option>
<option value="6" data-section="animal">Tiger</option>
<option value="7" data-section="animal">Lion</option>
<option value="8" data-section="animal">Pitbull</option>
<option value="9" data-section="animal">OrangUtan</option>
<option value="10" data-section="animal">Marsupilami Yellow cartoon</option>
</select>
I need to know why is it happened, and how to fix it. i do know the other way to get proper value like this. But for my project case i need "for" method
Update 1-> update jsfiddle

Values shuffled because you are getting the input array index checkedText.value = selectobject[z].value; knowing that at the change event the order of your hidden inputs change which causes the wrong values . (you can check by setting test-select display :block after page loding )
Above a working snippet :
note that you can passe directly value (1,2,3.. ) to the checkedTree input to disable directly inputs .
$( document ).ready(function() {
var $select = $('#test-select');
$select.treeMultiselect({
enableSelectAll: true,
sortable: false,
searchable: true,
startCollapse: true
});
});
function getCheckedTree(){
var tempCtr=0;
var $checkedText = $("#checkedTree");
var selectobject = $("[id*=treemultiselect-0-]:checked");
$checkedText.val("");
for(i=0;i<selectobject.length;i++) {
if(tempCtr==0){
tempCtr=1;
$checkedText.val($(selectobject[i]).parent().data("value"));
}else{
$checkedText.val($checkedText.val() + $(selectobject[i]).parent().data("value"));
}
}
}
function funcDis(){
var $checkedText = $("#checkedTree");
if($checkedText.val().length>0) {
$checkedText.val().split("").forEach(function(val){
$(".tree-multiselect .item[data-value="+val+"] input").prop('disabled', true);
$("#test-select option[value="+val+"]").prop('disabled', true);
})
};
}
function enableAll(){
$(".tree-multiselect input").each(function(idx){
$(this).prop('disabled', false);
var val = $(this).parent().data("value");
$("#test-select option[value="+val+"]").prop('disabled', false);
})
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<link href="//cdn.rawgit.com/patosai/tree-multiselect/v2.1.3/dist/jquery.tree-multiselect.min.css" rel="stylesheet"/>
<script src="//cdn.rawgit.com/patosai/tree-multiselect/v2.1.3/dist/jquery.tree-multiselect.min.js"></script>
<input id="checkedTree" type="text"/> <button onclick="funcDis()">disable</button><button onclick="enableAll()">enable all</button>
<select id="test-select" onchange="getCheckedTree()">
<option value="1" data-section="fruit">Banana</option>
<option value="2" data-section="fruit">Apple</option>
<option value="3" data-section="fruit">Avocado</option>
<option value="4" data-section="fruit">Pineapple</option>
<option value="5" data-section="fruit">PenPineappleApplePen</option>
<option value="6" data-section="animal">Tiger</option>
<option value="7" data-section="animal">Lion</option>
<option value="8" data-section="animal">Pitbull</option>
<option value="9" data-section="animal">OrangUtan</option>
<option value="10" data-section="animal">Marsupilami Yellow cartoon</option>
</select>
PS:You can pass dirctly an array of value to funcDis and disable input at start up .
That's all ,I fiddle if you want.

jQuery checkbox auto disable and re-enable

I have my HTML code and my JavaScript code like this (I'm using jQuery)
HTML :
<input type="checkbox" name="type" value="program" id="box-1" /> Desktop Programming
<select name="lang-1" id="select-1" disabled>
<option value="c">C/C++</option>
<option value="vb">VB</option>
<option value="cs">C#</option>
</select><br /><br />
<input type="checkbox" name="type" value="web" id="box-2" /> Web Development
<select name="lang-2" id="select-2" disabled>
<option value="asp">ASP</option>
<option value="php">PHP</option>
<option value="ror">Ruby on Rails</option>
</select><br /><br />
JavaScript (jQuery) :
$(document).ready(function(){
var x;
$("#box-" + x).click(function(){
var $this = $(this);
if ($this.is(":checked")) {
$("#select-" + x).prop('disabled', false);
} else {
$("#select-" + x).prop('disabled', true);
}
});
});
And I want when I checked the programming checkbox, the programming select option (beside the checkbox) is enable. As well as when I checked the web dev checkbox, the web dev select option is enable. But my code doesn't work. Can anybody help me?

You're better off using classes in stead of ID's with a random number.
I would give all my checkboxes the class "box" and the id 1, 2, 3 and so on.
Also, I think $this doesn't work. It has to be $(this).
Then your code would look like (working example):
$(document).ready(function(){
$('.box').click(function(){
var x= $(this).attr("id");
if ($(this).is(":checked")) {
$("#select-" + x).prop('disabled', false);
} else {
$("#select-" + x).prop('disabled', true);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="type" value="program" class="box" id="1" /> Desktop Programming
<select name="lang-1" id="select-1" disabled>
<option value="c">C/C++</option>
<option value="vb">VB</option>
<option value="cs">C#</option>
</select><br /><br />
<input type="checkbox" name="type" value="web" class="box" id="2" /> Web Development
<select name="lang-2" id="select-2" disabled>
<option value="asp">ASP</option>
<option value="php">PHP</option>
<option value="ror">Ruby on Rails</option>
</select><br /><br />

For things like this use classes , no need for ID.
Right now your variable x is undefined and without a loop to parse the ID's it won't work
<input type="checkbox" class="box" /> Desktop Programming
<select name="lang-1" class="select" disabled>
JS
$('input:checkbox.box').change(function(){
$(this).next('.select').prop('disabled', !this.checked);
});
If the layout is such that the select is not right after the input we can modify traverse a bit

Hi you can do something like this working demo
Please have one same class to all of your checkbox here i taken as checkbox then your HTML will look like this
<input type="checkbox" name="type" value="program" class="checkbox" id="box-1" /> Desktop Programming
<select name="lang-1" id="select-1" disabled>
<option value="c">C/C++</option>
<option value="vb">VB</option>
<option value="cs">C#</option>
</select><br /><br />
<input type="checkbox" name="type" value="web" class="checkbox" id="box-2" /> Web Development
<select name="lang-2" id="select-2" disabled>
<option value="asp">ASP</option>
<option value="php">PHP</option>
<option value="ror">Ruby on Rails</option>
</select><br /><br />
add write this jquery
$(document).ready(function(){
$('.checkbox').on('change',function(){
var checked_id = $(this).prop('id');
var a = checked_id.slice(4);
$("#select-"+a).prop('disabled',!this.checked);
});
});

So there are lots of answers here, much of which are better ways to do what you are trying with smaller cleaner code. But for the sake of it I am adding this answer to show you what was wrong with code you wrote and a working example.
So you declared variable x but never assigned it a value. It seems like you wanted to loop over the checkboxes and use the index x to assign the event. Since you started using IDs with 1 we need to compensate in the code for it. Then since x has no scope to our event directly we need to find the value of x since when the event runs it will only have the last value of x.
All HTML I left the same and only altered the javascript. As I said there are much better ways to do this and there are many answers here that show it but this is to show you what you were doing wrong.
Fiddle: https://jsfiddle.net/quyn4y23/
$(document).ready(function() {
// Find all checkboxes and get the length of all found
var x, inputs = $('input[type="checkbox"]'), length = inputs.length;
// For each checkbox assign event
for (x = 1; x <= length; x++) {
$("#box-" + x).click(function() {
var $this = $(this);
// Find the number in the checkbox id
var x = $this.attr('id').replace("box-", "");
// Use number to find correct select
if ($this.is(":checked")) {
$("#select-" + x).prop('disabled', false);
} else {
$("#select-" + x).prop('disabled', true);
}
});
}
});

Pass multiple checkbox values to dropdown lists in jQuery

I have a checkbox with 5 options. Only two of these can be selected. What I am trying to do is pass the value checked to a dropdown list. Since two checkboxes can be selected, I would like their values to be passed to two dropdown lists. Here's what I have so far.
HTML
<input class="theme" type="checkbox" name="theme" value="adventure" id="adventure"/><label for="adventure">Adventure</label>
<input class="theme" type="checkbox" name="theme" value="attraction" id="attraction"/><label for="attraction">Attraction</label>
<input class="theme" type="checkbox" name="theme" value="culture" id="culture"/><label for="culture">Culture</label>
<input class="theme" type="checkbox" name="theme" value="leisure" id="leisure"/><label for="leisure">Leisure</label>
<input class="theme" type="checkbox" name="theme" value="nature" id="nature"/><label for="nature">Nature</label>
<select id="list2">
<option value="adventure">Adventure</option>
<option value="attraction">Attractions</option>
<option value="culture">Culture</option>
<option value="leisure">Leisure</option>
<option value="nature">Nature</option>
</select>
<select id="list1">
<option value="adventure">Adventure</option>
<option value="attraction">Attractions</option>
<option value="culture">Culture</option>
<option value="leisure">Leisure</option>
<option value="nature">Nature</option>
</select>
jQuery
$(document).ready(function(){
$('input[type="checkbox"]').click(function(){
if($(this).attr("value")=="adventure"){
$("#list1").val("adventure");
}
if($(this).attr("value")=="attraction"){
$("#list2").val("attraction");
}
if($(this).attr("value")=="culture"){
$(".cultureInterests").toggle();
}
if($(this).attr("value")=="leisure"){
$(".leisureInterests").toggle();
}
if($(this).attr("value")=="nature"){
$(".natureInterests").toggle();
}
});
As you can see, this method is faulty as the order of selecting a checkbox is beyond my control and I won't be able to tell where to pass the value. Any help is highly appreciated.
EXAMPLE
Here's a JSFiddle of what I am trying to achieve. Notice how the dropdown lists value change when you click on Adventure or Attractions.
http://jsfiddle.net/ajitks/3hdbgw79/
Thank you so much!

Try something like this:
$('input[type="checkbox"]').click(function() {
if ($(this).is(':checked')) {
if ($('input[type="checkbox"]:checked').length == 1) {
$('select#list1').val($(this).val());
} else {
$('select#list2').val($(this).val());
}
}else{
$('select#list1').val($('select#list2').val())
$('select#list2').val('')
}
});
if you don't want if else condition we can use Conditional (Ternary) Operator.

ANSWER
Check out this FIDDLE. It works!
$('.next').click(function() {
var i=1;
$('input[type="checkbox"]:checked').each(function(){
$('select#list'+i).val($(this).val());
i++;
});

Disable select box and enable textbox using one checkbox with JavaScript

I'm am fairly new to JavaScript; I have been googling all day for this but i only found how to enable and disable one textbox using one checkbox.
Here is my code
JavaScript
function enable_text(status){
status=!status;
document.sr2.other_text.disabled = status;
}
HTML
<form name=sr2 method=post>
<input type="checkbox" name=others onclick="enable_text(this.checked)">
Others
<input type=text name=other_text>
</form>
Note: the code I posted is only for a textbox that when uncheck in checkbox it will be enabled.
My question is how do you disable select tag and enable a textbox after unchecking a checkbox?

Add an id to your text box then just put the below onclick of your checkbox instead of the function call.
<form name=sr2 method=post>
<input type="checkbox" name=others onclick= "document.getElementById('id_of_txtbox').disabled=this.checked;">Others
<input type=text name=other_text>

Here's the HTML
<input type="text" id="txt" disabled="disabled"/>
<select name="sel" id="sel">
<option value="test1">Test 1</option>
</select>
<input type="checkbox" name="vehicle" value="Car" checked="checked" onclick="enableText(this.checked)">Uncheck to Disable Select and Enable Text
And the JavaScript is
function enableText(checked){
if(!checked){
document.getElementById('sel').disabled = true;
document.getElementById('txt').disabled = false;
}
else{
document.getElementById('sel').disabled = false;
document.getElementById('txt').disabled = true;
}
}
Select is disabled and text is enabled on uncheking the checkbox and vice versa. Hopefully that helps.

Based on your question, are you trying to present a dropdown but then allow them to enter other values not in the dropdown?
If so, here is another way to approach it:
HTML:
<select name="RenewalTerm" id="RenewalTerm">
<option value="12">12 Month</option>
<option value="24">24 Month</option>
<option value="36">36 Month</option>
<option value="Other">Other</option>
</select>
<span id="RenewalTermOtherFields">
<label labelfor="RenewalTermManual" >Enter Renewal Term: </label>
<input type="text" name="RenewalTermManual" id="RenewalTermManual" />
</span>
JavaScript/jQuery:
$(document).ready(function() {
$('#RenewalTermOtherFields').hide();
$('#RenewalTermManual').val($('#RenewalTerm').val());
$('#RenewalTerm').change(function() {
var selectedItem = $("select option:selected").val();
if (selectedItem !== 'Other') {
$('#RenewalTermOtherFields').hide();
$('#RenewalTermManual').val($('#RenewalTerm').val());
}
else
{
$('#RenewalTermManual').val('');
$('#RenewalTermOtherFields').show();
}
});
});
See It In Action!: http://eat-sleep-code.com/#/javascript/dropdown-with-other-field
This will allow you to select "other" from the list, and when you do it will automatically display a textbox for free-form entry.