Category: JavaScript

To check the value of a radio button group in JavaScript, we can use the document.querySelector method to get the checked radio button.

Then we get the value property of that to get the value of the value attribute of the selected radio button.

For instance, if we have the following HTML:

<div>
  <input type="radio" id="genderm" name="gender" value="male" />
  <label for="genderm">Male</label>
  <input type="radio" id="genderf" name="gender" value="female" checked />
  <label for="genderf">Female</label>
</div>

Then we can get the value of the radio button with the checked attribute by writing:

const {
  value
} = document.querySelector('input[name="gender"]:checked')
console.log(value)

We use the ‘input[name=”gender”]:checked’ selected to get the radio button with the checked attribute enabled.

And we get the value of the value attribute with the value property.

Therefore, value should be 'female' .

Sometimes, we want to remove an element instead of appending to it with jQuery.

In this article, we’ll look at how to remove an element instead of appending to it with jQuery.

Opposite of Append in jQuery

To remove an element instead of appending to it with jQuery, we can use the remove method.

For instance, if we have the following HTML:

<div>

</div>

Then we can write:

const newUL = $('<ul><li>test</li></ul>');
$('div').append(newUL);

setTimeout(() => {
  newUL.remove();
}, 3000)

to create the ul element with:

const newUL = $('<ul><li>test</li></ul>');

Then we can append it to the div with:

$('div').append(newUL);

And finally, we remove the ul after 3000 milliseconds by writing:

setTimeout(() => {
  newUL.remove();
}, 3000)

Conclusion

To remove an element instead of appending to it with jQuery, we can use the remove method.

To trigger a checkbox click event even if it’s checked with jQuery, we can call the jQuery trigger method with 'click' .

For instance, if we have the following HTML:

<div>  
  <input type="checkbox" id="item-1" value="1"> Item 1 <br />  
  <input type="checkbox" id="item-2" value="2" disabled> Item 2 <br />  
  <input type="checkbox" id="item-3" value="3" disabled> Item 3 <br />  
  <input type="checkbox" id="item-4" value="4" disabled> Item 4 <br />  
  <input type="checkbox" id="item-5" value="5"> Item 5  
</div>

Then we can cal trigger with 'click' by writing:

$('input').trigger('click');

to click all the non-disabled checkboxes.

To paginate a JavaScript array, we can use the slice method to return the chunk of the array we want.

For instance, we can write:

const arr = Array(100).fill().map((_, i) => i)
const paginate = (array, pageSize, pageNumber) => {
  return array.slice((pageNumber - 1) * pageSize, pageNumber * pageSize);
}
console.log(paginate(arr, 10, 1))
console.log(paginate(arr, 10, 2))
console.log(paginate(arr, 10, 3))

We have the arr array with 100 entries.

Then we create paginate function that takes the array , pageSize and pageNumber parameters.

pageNumber starts from 1, so we call slice with (pageNumber — 1) * pageSize as the first argument and pageNumber * pageSize as the 2nd argument to return the slice according to a human-readable page number.

Then from the console log, we see:

[0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
[10, 11, 12, 13, 14, 15, 16, 17, 18, 19]
[20, 21, 22, 23, 24, 25, 26, 27, 28, 29]

as the returned values of paginate with pageSize 10 and pageNumber 1, 2, and 3 respectively.

To find an object property by key deep in a nested JavaScript array, we can traverse the deeply nested array with various loops and methods.

For instance, we can write:

const arr = [{
  'title': "some title",
  'channel_id': '123we',
  'options': [{
    'channel_id': 'abc',
    'image': 'http://asdasd.com/all-inclusive-block-img.jpg',
    'title': 'All-Inclusive',
    'options': [{
      'channel_id': 'dsa2',
      'title': 'Some Recommends',
      'options': [{
        'image': 'http://www.asdasd.com',
        'title': 'Sandals',
        'id': 1,
        'content': {
          //...
        }
      }]
    }]
  }]
}]

const customFilter = (object, key, value) => {
  if (Array.isArray(object)) {
    for (const obj of object) {
      const result = customFilter(obj, key, value);
      if (result) {
        return obj;
      }
    }
  } else {
    if (object.hasOwnProperty(key) && object[key] === value) {
      return object;
    }

    for (const k of Object.keys(object)) {
      if (typeof object[k] === "object") {
        const o = customFilter(object[k], key, value);
        if (o !== null && typeof o !== 'undefined')
          return o;
      }
    }

    return null;
  }
}

console.log(customFilter(arr, 'id', 1))

We have the deeply nested arr array that we want to check if an object with id property set to 1 exists.

To do that, we create the customFilter function that takes the object that we want to search, and the key and value that we want to look for in the object .

In the function, we check if object is an array with Array.isArray .

If it is, then we loop through the entries with the for-of loop and call customFilter with obj array entry, key and value .

Otherwise, if we found the key and value we’re looking for with:

object.hasOwnProperty(key) && object[key] === value

then we return the object.

Otherwise, we loop through the keys of the object with the for-of loop.

In the loop body, we check if the property value is an object with:

typeof object[k] === "object"

And if it is, we call customFilter on it with object[k] , key and value .

If the returned result of that isn’t null or undefined , we return the o object.

If we traverse the whole array and found no match, then we return null .

Therefore, the console log should log the entry found since it exists.