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>

html convert radio button list into dropdown

I have converted my radio button list in the second fieldset to a dropdown menu. However, I want to pass either the value from the first fieldset which itself is a radio button, or from the selected value of the dropdown menu from the second fieldset. by default my radio button in the first fieldset is checked but when I select from dropdown menu, it doesn't uncheck the radio from first fieldset.
My goal is to pass only one value from these, either radio button value or one of the selected values from dropdown.
You will see my previous radio buttons in the second fieldset, they are commented. but it worked! So how to change the code to work the way it should: i.e. either of the selected value pass: either from radio button or dropdown? if radio button then disable dropdown and vice versa.
<table>
<td>
<fieldset id="field1" >
<legend>Radio</legend>
<label ><Input type = 'Radio' Name ='mychoice' class='mychoice' value= 'myradio' checked>Upload</label>
<div id='uploadFile'>
<input type="file" name="file" id="file" />
</div>
</fieldset>
</td>
<td>
<fieldset id="field2" >
<!--
<div><label ><Input type = 'Radio' Name ='mychoice' class='mychoice' value= 'myoption1' onClick=''>1</label></div>
<div><label ><Input type = 'Radio' Name ='mychoice' class='mychoice' value= 'myoption2' onClick=''>2</label></div>
<div><label ><Input type = 'Radio' Name ='mychoice' class='mychoice' value= 'myoption3' onClick=''>3</label></div>
<div><label ><Input type = 'Radio' Name ='mychoice' class='mychoice' value= 'myoption4' onClick=''>4</label></div>
-->
<select class="mychoice" class='mychoice'>
<option Name ='mychoice' class='mychoice' value="myoption1">1</option>
<option Name ='mychoice' class='mychoice' value="myoption2">2</option>
<option Name ='mychoice' class='mychoice' value="myoption3">3</option>
<option Name ='mychoice' class='mychoice' value="myoption4">4</option>
</select>
</fieldset>
</td>
</table>

First of all don't use a single radio button when you want to check for a yes/no value. Use a checkbox instead. you don't actually need either of these inputs as you could simply handle the event from your uploadFile input.
Second, the id attribute of your <fieldset>s must be unique (see this link). That means you cannot reuse UserChoice as id for all the <fieldset>s and the <select> element. By the way you should really look up the HTML syntax as there are few mistakes your browser silently fixes.
Let's sanctonize your HTML
<fieldset id="DefaultUserChoice">
<legend>Radio</legend>
<label for="mychoice">Upload</label>
<input type="checkbox" id="CheckboxUserChoice" name ="mychoice" class="mychoice" value="mycheckbox" checked="checked">
<div id="uploadFile">
<input type="file" name="file" id="file">
</div>
</fieldset>
<fieldset id="AnotherUserChoice">
<select class="mychoice" id="SelectUserChoice">
<option value="myoption1">1</option>
<option value="myoption2">2</option>
<option value="myoption3">3</option>
<option value="myoption4">4</option>
</select>
</fieldset>
I'd assume that you use javascript though it is missing from your question (sorry cannot write comments yet). In case you don't use it, you should start using it. What you want to achieve cannot be done with HTML alone.
You can now start to use the new id's to check which user input you want to use.
The javascript code would look something like this:
// Handle the checkbox unchecking
document.getElementById("SelectUserChoice").onchange = function(event) {
// Disable the checkbox when the select element changes
}
function validateUserInput() {
if(document.getElementById("CheckboxUserChoice").checked == true) {
// Use the checkbox value
} else {
// Use the select value
}
}
Edit:
A very simple example. The checkbox is no very useful and nothing happens when you uncheck it by yourself.
mySelectedValue.innerText = "mycheckbox";
SelectUserChoice.onchange = function(event) {
// Disable the checkbox when the select element changes
CheckboxUserChoice.checked = false;
mySelectedValue.innerText = event.target.value;
}
CheckboxUserChoice.onchange = function(event) {
mySelectedValue.innerText = event.target.value;
}
<body>
<fieldset id="DefaultUserChoice">
<legend>Radio</legend>
<label for="mychoice">Upload</label>
<input type="checkbox" id="CheckboxUserChoice" name="mychoice" class="mychoice" value="mycheckbox" checked="checked">
<div id="uploadFile">
<input type="file" name="file" id="file">
</div>
</fieldset>
<fieldset id="AnotherUserChoice">
<select class="mychoice" id="SelectUserChoice">
<option value="dontUseMe">-Select a value-</option>
<option value="myoption1">1</option>
<option value="myoption2">2</option>
<option value="myoption3">3</option>
<option value="myoption4">4</option>
</select>
</fieldset>
<p>Value to be used: <span id="mySelectedValue">none</span>
</p>
</body>

Multiple textboxes fill the dropdown selection having same class in jquery

I have used the concept of multiple textboxes having same class fill with the multiple dropdown option selection which also having same class.I have facing problems in it.when i click the first dropdown option then it change the second textbox value.I want that if i click on first dropdown option it changes the values of first textbox not other or if click the second dropdown option it will change the value of second textbox.
<form action="" method="post">
<select name="drop[]" id="budget" class="drop">
<option value="1">option1</option>
<option value="2">option2</option>
<option value="3">option3</option>
</select>
<input type="text" name="txt" id="txt" class="txt" value="text1"><br>
<select name="drop[]" id="budget1" class="drop">
<option value="1">option1</option>
<option value="2">option2</option>
<option value="3">option3</option>
</select>
<input type="text" name="txt" id="txt1" class="txt" value="text2">
</form>
$('input[name="txt"]').each(function () {
$('.drop').on('change', function(){
var total = $(this).val();
$('input[name="txt"]').val($(this).find("option:selected").attr("value"));
});
});

You need to find out the next input element which should be updated when you change a select element. You can use the below code to achieve this.
$('.drop').on('change', function(){
var total = $(this).val();
$(this).next("input:first").val($(this).find("option:selected").attr("value"));
});
Plunker : https://plnkr.co/edit/qFjuFtwhHBvDE9zxAup2?p=preview

Enable HTML select when radio button is checked or vice-versa

I'm trying to do something. I have the following code:
<form>
<input type='radio' name='radio_flavour' checked/>Unique flavour<br/><input class='double-flavoured' type='radio' name='radio_flavour'/>Double flavoured<br/>
<select>
<option>Select the second flavour...</option>";
foreach($connection->query($sql3) as $flavour)
{
echo "<option value='{$flavour['flavour_id']}'>{$flavour['flavour_name']}</option>";
}
echo "
</select>
</form>
What I need is when the second radio button radio_flavour with the class double-flavoured is selected, the HTML select under it will be enabled and vice-versa. I'm trying with this jQuery code:
$('.double-flavoured').change(function()
{
var setE = $(this).is(':checked') ? true : false;
$(this).nextAll('select').first().attr('disabled', setE);
});
But this don't work!
How to do this with jQuery? Thanks!

Your code only runs when you click on the second button, not when you click on the first, since it doesn't have the double-flavoured class. You need to attach the handler to all the buttons in the group, and then test whether the one being selected has the class.
$(":radio[name=radio_flavour]").click(function() {
$(this).nextAll('select').attr('disabled', !$(this).hasClass("double-flavoured"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type='radio' name='radio_flavour' checked/>Unique flavour
<br/>
<input class='double-flavoured' type='radio' name='radio_flavour' />Double flavoured
<br/>
<select disabled>
<option>Select the second flavour...</option>";
<option value="1">Flavour 1</option>
<option value="2">Flavour 2</option>
<option value="3">Flavour 3</option>
</select>
</form>

javascript checkbox enable/disable

Ok this is very anoying, and it is probably very simple. I want to start my web page with disabled checkboxes, and after particlar line in listbox is selected to enable those boxes. So I put this in onload method
onload = function () {
for (i = 0; i < document.frmMain.checkgroup.length; i++){
document.frmMain.checkgroup[i].disabled = true ;
}
}
it start my page with disabled boxes, now i want do enable them
function enableCheckboxes(){
if (document.frmMain.Vrste[document.frmMain.Vrste.selectedIndex].value == "Sendvici i Rostilj"){
for(i=0;i<document.frmMain.checkgroup.length;i++){
document.frmMain.checkgroup[i].enabled = true;
}
}
}
it goes in to the for loop, but it never enable those checkboxes. I cannot figure it why.
and this is html part, where i call enablecheckbox function:
<select name="Vrste" onChange="PopulatePodvrste(); enableCheckboxes();" size="8">
<option value="Pica">Pica</option>
<option value="Barbarina domaca trpeza">Barbarina domaca trpeza</option>
<option value="Slana Palacinka">Slana Palacinka</option>
<option value="Slatka Palacinka">Slatka Palacinka</option>
<option value="Sendvici i Rostilj">Rostilj i sendvici</option>
<option value="Dobro jutro sa Barbarom">Dobro jutro sa Barbarom</option>
<option value="Chicken Meni">Chicken Meni</option>
<option value="Posebna Ponuda">Posebna Ponuda</option>
<option value="Salate">Salate</option>
</select>
And finally actual checkboxes:
<input type="checkbox" name="checkgroup" >Susam</input><br>
<input type="checkbox" name="checkgroup" >Cili</input><br>
<input type="checkbox" name="checkgroup" >Tartar</input><br>
<input type="checkbox" name="checkgroup" >Urnebes</input><br>
<input type="checkbox" name="checkgroup" >Krastavac</input>

Try instead:
document.frmMain.checkgroup[i].disabled = false ;

if would add the jquery library to your page then I would add:
$(document).ready(function() {
$("input[name='checkgroup']").attr("disabled", "disabled");
})
function enableCheckboxes() {
$("input[name='checkgroup']").removeAttr("disabled");
}
If you don't want to use jquery then just change your enable line to be:
document.frmMain.checkgroup[i].disabled = false ;