Change the selection box to a checkbox

Question

Change the selection box to a checkbox

I am struggling to retrieve the value of a selection box inside jQuery. Specifically, I need to access the selection box value within a function that triggers on a checkbox change event:

This is what I have so far:

$('input').on('change', function()  //need selection box value here
});

<select class="selectclass" id="id" >
 <option  value="22" >option1</option>   
  <option  value="33" >option21</option> 
</select>

I have looked into similar questions on stackoverflow but have not found the solution I need

jquery change select to checkbox

etc...

javascript jquery html css

Answer 1

Answer №1

Here is a simple way to convert the select option to a checkbox when the selection changes:

$('select').on('change', function() {
  var val = $(this).val();
  $('<input/>').attr({
  type: 'checkbox',
  value: val
  }).appendTo('#check');
  console.log(val);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="selectclass" id="id">
 <option  value="22" >option1</option>   
  <option  value="33" >option21</option> 
</select>
<div id="check"></div>

You can also achieve this without using the change function, by simply using onload:

$('select option').each(function() {
  var val = $(this).val();
  $('<input/>').attr({
    type: 'checkbox',
    value: val
  }).appendTo('#check');
})

$('input').on('change', function() {
  alert(this.value);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="selectclass" id="id">
 <option  value="22" >option1</option>   
  <option  value="33" >option21</option> 
</select>
<div id="check"></div>

Answer 2

Here is a simple way to convert the select option to a checkbox when the selection changes:

$('select').on('change', function() {
  var val = $(this).val();
  $('<input/>').attr({
  type: 'checkbox',
  value: val
  }).appendTo('#check');
  console.log(val);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="selectclass" id="id">
 <option  value="22" >option1</option>   
  <option  value="33" >option21</option> 
</select>
<div id="check"></div>

You can also achieve this without using the change function, by simply using onload:

$('select option').each(function() {
  var val = $(this).val();
  $('<input/>').attr({
    type: 'checkbox',
    value: val
  }).appendTo('#check');
})

$('input').on('change', function() {
  alert(this.value);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="selectclass" id="id">
 <option  value="22" >option1</option>   
  <option  value="33" >option21</option> 
</select>
<div id="check"></div>

Answer 3

Answer №2

Here's a snippet of code that extracts values and displays labels.

$('select#selectid option').each(function() {
  var val = $(this).val();

$("#check").append('<input type="checkbox" value="'+$(this).val()+'">'+$(this).val()+'</input>');
   })

$('#selectid').prop('disabled','disabled').hide();

$('input').on('change', function(){
  alert(this.value);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="selectclass" id="selectid">
 <option  value="22" >option1</option>   
  <option  value="33" >option21</option> 
</select>
<div id="check"></div>

Answer 4

Here's a snippet of code that extracts values and displays labels.

$('select#selectid option').each(function() {
  var val = $(this).val();

$("#check").append('<input type="checkbox" value="'+$(this).val()+'">'+$(this).val()+'</input>');
   })

$('#selectid').prop('disabled','disabled').hide();

$('input').on('change', function(){
  alert(this.value);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="selectclass" id="selectid">
 <option  value="22" >option1</option>   
  <option  value="33" >option21</option> 
</select>
<div id="check"></div>

Change the selection box to a checkbox

Answer №1

Answer №2

Similar questions

Having difficulty ensuring DayJs is accessible for all Cypress tests

Having trouble parsing the body parameter in Express for a POST request

What is the equivalent of {...props} in React for destructuring props in Vue?

Activate the overflow feature within native-base cards

What strategies can I implement to minimize repetition in React when utilizing the useState hook?

Exploring the fundamentals of authentication with Express JS

Leverage the PhantomJS variable within the page.evaluateJavaScript function

The Ajax script seems to be failing to update the PHP file along with its corresponding variable value

The browser freezes when attempting to upload an image using an ajax call

Enhance user experience with PrimeFaces by implementing an Ajax update feature through

Achieving perfect alignment in a CSS grid for form elements vertically

Error: Invalid Request - Nodejs Request Method

Switching from module.exports in Javascript to Typescript format

Issues arise when attempting to send an AJAX POST request within WordPress

Setting up CSS Flexbox so that the first child element is the same height as the

Is it possible to implement a validation process that prevents the opening of a modal using data-bs-target until all necessary

Getting access to the properties of an array containing objects

Best practices for sending variables to an HTML page using nodemailer

Node js overlooking non-packaged middleware

A customized Javascript application designed specifically for Blackberry Bold users, enabling them to effortlessly choose a country and seamlessly enter a correctly formatted zip code in the designated text field