check the checkbox if name and value match with the input checkbox field

Question

.html

var url = "http: //127.0.0.1:8000/search/?name=san&language=1&cast=1&language=2&cast=3";
  existingUrl(var);

function existingUrl(fullUrl) {
  $('.language').each(function() {
    var hasValue = fullUrl.indexOf($(this).val());
    if (hasValue != -1)
      this.checked = true;

  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="get">


  <input type="text" name="name" id="name" hidden> language
  <input type="checkbox" name="language" class="language" id="1" value="1"> cast
  <input type="checkbox" name="cast" class="cast" id="2" value="1"> language
  <input type="checkbox" name="language" class="language" id="3" value="2"> cast
  <input type="checkbox" name="cast" class="cast" id="4" value="3"> 
  <input type="submit" value="submit">
</form>

It work fine if all the checkbox input value have different value.If we try with different name having same value it checked all checkbox with that value.

Please explain how the current behavior differs from the behavior you're trying to achieve. — Tyler Roper
– Tyler Roper, Commented Sep 28, 2019 at 5:06
if we have //127.0.0.1:8000/search/?name=san&language=1 in url it checked all the checkbox with value 1 (cast and language checkbox with value1) not just langauge checkbox with value 1. — sanjeet pal
– sanjeet pal, Commented Sep 28, 2019 at 5:11

Joy Biswas · Accepted Answer · 2019-09-28 05:48:31Z

2

You can find items from a map of queries you can compare them by generating key/value pair of each item by $(this).prop('name') + '=' + $(this).val() this logic and look into your existing query array which is created by all queryparams spliced by &

var url = 'http://127.0.0.1:8000/search/?name=san&language=1&cast=1&language=2&cast=3';
existingUrl(url.substring(url.indexOf('?') + 1));

function existingUrl(query) {
  var urlparts = query.split('&');
  $('input[type=checkbox]').each(function() {
    this.checked = urlparts.indexOf($(this).prop('name') + '=' + $(this).val());
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="get">
  <input type="text" name="name" id="name" hidden> language
  <input type="checkbox" name="language" class="language" id="1" value="1"> cast
  <input type="checkbox" name="cast" class="cast" id="2" value="1"> language
  <input type="checkbox" name="language" class="language" id="3" value="2"> cast
  <input type="checkbox" name="cast" class="cast" id="4" value="3">
  <input type="submit" value="submit">
</form>

edited Sep 28, 2019 at 5:48

answered Sep 28, 2019 at 5:28

Joy Biswas

6,5531 gold badge27 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Joy Biswas Over a year ago

what do yo mean?? you want to derive from your checkboxes or from url? which is dynamic?

Joy Biswas Over a year ago

Anyhow I updated to input[type=checkbox] hope now it helps

Tyler Roper · Accepted Answer · 2019-09-29 01:53:28Z

1

Due to the fact that the duplicate parameter names don't really allow you to use URLSearchParams, I'd split on & and = to generate key/value pairs. For each, you could use attribute selectors to target and check the corresponding items.

const url = 'http://127.0.0.1:8000/search/?name=&language=1&cast=3';

function existingUrl(fullUrl) {
  let query = fullUrl.split("?")[1];                                //?language=1&cast=3
  query.split("&").forEach(param => {                               //split on "&"
    let [name, value] = param.split("=");                           //split on "=" to get name/value pairs
    let valueSelector = value ? `[value=${value}]` : '';            //account for null value
    $(`input[name=${name}]${valueSelector}`).prop("checked", true); //check corresponding input
  });
}

existingUrl(url);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="get">
  <input type="text" name="name" id="name" hidden> language
  <input type="checkbox" name="language" class="language" id="1" value="1"> cast
  <input type="checkbox" name="cast" class="cast" id="2" value="1"> language
  <input type="checkbox" name="language" class="language" id="3" value="2"> cast
  <input type="checkbox" name="cast" class="cast" id="4" value="3">
  <input type="submit" value="submit">
</form>

edited Sep 29, 2019 at 1:53

answered Sep 28, 2019 at 5:29

Tyler Roper

21.7k6 gold badges35 silver badges58 bronze badges

2 Comments

Bilal Siddiqui Over a year ago

URLSearchParams has getAll method which allows to get parameters with same name

sanjeet pal Over a year ago

your code doesn't work if i put put param with empty params.Example:search/?name=&language=1&language=2

Bilal Siddiqui · Accepted Answer · 2019-09-28 05:13:59Z

0

Change val() to id

function existingUrl(fullUrl) {
  $('.language').each(function() {
    var hasValue = fullUrl.indexOf($(this).attr('id'));
    if (hasValue != -1)
      this.checked = true;

  });
}

Note: it is a bad practice using indexOf with strings, lets say you have language=111 in url then that will also work for language 1 and 11 which is not intended. Best approach is to get url parameter values in an array and then using indexOf will be no harm.

answered Sep 28, 2019 at 5:13

Bilal Siddiqui

3,6491 gold badge16 silver badges22 bronze badges

4 Comments

sanjeet pal Over a year ago

I am not passing id of checkbox in url.

Bilal Siddiqui Over a year ago

ok, if it is value then what you are trying to acheive ? it will be checking all with same value. You must elaborate your need so that one can give you a better idea.

sanjeet pal Over a year ago

I just want only those chebox will checked whose name and value are matches with url params not just on value match.

Bilal Siddiqui Over a year ago

Okay, I have posted another answer, much cleaner for your need.

rajender kumar · Accepted Answer · 2019-09-28 05:21:04Z

0

convert url into string and then pass it to function.

var url = 'http: //127.0.0.1:8000/search/?name=san&language=1&cast=1&language=2&cast=3';
existingUrl(url);

answered Sep 28, 2019 at 5:21

rajender kumar

4223 silver badges12 bronze badges

1 Comment

sanjeet pal Over a year ago

That not a problem i edit my question.I just want only those chebox will checked whose name and value are matches with url params not just on value match.

Bilal Siddiqui · Accepted Answer · 2019-09-28 05:37:27Z

0

Should work exactly what you need:

var url = new URL(url_string);
var languageParams = url.searchParams.getAll("language");

$('.language').each(function() {
      this.checked = languageParams.indexOf($(this).val()) != -1;
});

answered Sep 28, 2019 at 5:37

Bilal Siddiqui

3,6491 gold badge16 silver badges22 bronze badges

1 Comment

sanjeet pal Over a year ago

No there are multiple param in url which i have not mentions.Your code is completly hardcoded.Thank for help tho.

Collectives™ on Stack Overflow

check the checkbox if name and value match with the input checkbox field

5 Answers 5

2 Comments

2 Comments

4 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

2 Comments

4 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related