Reading a Checkbox/Radio Button/Select option Value in JQuery and Enter Key press fire event

سُلَيْمَان بْن دَاوُوْد
Jun 7, 2020
2 min read

Updated: Feb 18, 2024

var getdirectmessage = false;

if( jQuery('#message').is(':checked')  ){

    var getdirectmessage = true;

}else{

    var getdirectmessage = true;

HTML Code

<div class="form-group check check-2">

    <input type="checkbox" id="message">

    <label for="message">I want to be able to get direct messages from other YUP! users.</label>

</div>

Something Similar can be done for A radio Button as well code copied from

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>jQuery Get Selected Radio Button Value</title>

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

<script>

    $(document).ready(function(){

        $("input[type='button']").click(function(){

            var radioValue = $("input[name='gender']:checked").val();

            if(radioValue){

                alert("Your are a - " + radioValue);

});

});

</script>

</head>

<body>

    <h4>Please select your gender.</h4>

<p>

        <label><input type="radio" name="gender" value="male">Male</label>

        <label><input type="radio" name="gender" value="female">Female</label>

    </p>

    <p><input type="button" value="Get Value"></p>

</body>

</html>

Now when select boxes come into place the following code can be used to read their value in java script the first one is used to select the selected options data attribute and other one is used to get the value of selected option

var category = jQuery("#category option:selected").data("tid");

var industry = jQuery("#SelectDropdown2 option:selected").val();

Following code is used to Fire and Enter Key Event

jQuery(document).keydown(function(e) {

  if (e.which === 13) {

  reset();

  var searchtext = jQuery('#searchtext').val();

	var pageno   = jQuery('#pageno').val();

	var category = jQuery("#category option:selected").data("tid");

	var industry = jQuery("#SelectDropdown2 option:selected").val();

	var location = jQuery("#SelectDropdown1 option:selected").val();

	var data = { 'action': 'filter_product',searchtext, category, industry, location, pageno };

	jQuery.ajax({

         	url    : ajaxurl,

         	type   : 'POST',

         	data   : data,

         	beforeSend: function() {

},

         	success: function(response) {

         		jQuery('#postsgrid').empty().append(response);

         		jQuery('#pageno').val( parseInt(jQuery('#pageno').val()) +1 );

},

});

});

Suppose you want to select all values as string for more than one check boxes or radio button group you can use following code

     function brand(){

          let checkedValues1 = '';

          jQuery('#multiSelectDropdown1 input').each(function(){

               if(jQuery(this).is(':checked')){

                    checkedValues1 += jQuery(this).val() + ',';

});

          return checkedValues1 = checkedValues1.trim();

wpfix.xyz

Reading a Checkbox/Radio Button/Select option Value in JQuery and Enter Key press fire event

Recent Posts

Comments