CODEWITHSUNDEEP
javascriptjqueryapi
HJW
HJW

Reputation: 1032

checkboxes check automatically

I have a row of checkboxes:

<input type='checkbox' value="Maps" id="maps" >
<label for='maps'>Maps</label>
<input type='checkbox' value="wikipedia" id="wikipedia" >
<label for='maps'>Wikipedia</label>
... few more

I have a set of APIs that are supposed to fire within a function dependent on their respective checked box. As a standard, I do not have them checked. When I hit submit on user input (user selects a city name), they all select themselves.

Example function:

function fetchMap(city, callback){
  if ($('#maps').prop('checked',true)) {
    const query = {
        url: 'https://maps.googleapis.com/maps/api/geocode/json',
        data: {
            address: city,
            key: 'noobing'
        },
        success: callback
    }
    $.ajax(query)
  }
}

Also, all other APIs are triggered simultaneously on user submit, whether their box is checked or not.

How do i prevent the boxes from checking themselves automatically on submit, and hence make sure that only the selected APis get AJAXed?

Thank you

Upvotes: 0

Views: 47

Answers (1)

Eddie
Eddie

Reputation: 26844

$('#maps').prop('checked',true) means that you are checking the checkbox maps, since there is a second parameter true.

If you just want to get if maps is checked or not, you can $('#maps').prop('checked');. Without the second parameter.

Like:

function fetchMap(city, callback){
  if ( $('#maps').prop('checked') ) { //<-- No second parameter.
    const query = {
        url: 'https://maps.googleapis.com/maps/api/geocode/json',
        data: {
            address: city,
            key: 'noobing'
        },
        success: callback
    }
    $.ajax(query)
  }
}

Doc: .prop()

Upvotes: 3

Related Questions