CODEWITHSUNDEEP
jqueryhtml
Julien
Julien

Reputation: 159

Check Input when Select with same class change

I actually have this code but I do not wanted to write it for every select (since I have more than 10 select and that it will change with time). 

$('select.myClass').on('change', function() {
  $('input.myClass').prop('checked', true);
});

Is it possible to make it better with something like "if a select option is changed, check the input with the same class as the changed option"?

Codepen UPDATED with answer from sojtin

https://codepen.io/Qasph/pen/pPjrpx

Upvotes: 1

Views: 2049

Answers (5)

Radek Anuszewski
Radek Anuszewski

Reputation: 1910

You can pack inputs in outer div, use closest("div") to find him and inside search for input.level, see Codepen: https://codepen.io/anon/pen/YVyxgZ. Based ot this SO question: Find element within parent container with jQuery . With this solution, you can have many selects with the same CSS classes - it's easier to style them.

Upvotes: 0

Dan Philip Bejoy
Dan Philip Bejoy

Reputation: 4391

Try this for your current case

$('select').change(function(){
  var target = $(this).attr('class');
  $('input.'+target).prop('checked', true);
});

I suggest adding an ID with the same value to the target with the above code and change it to

$('select').change(function(){
  var target = $(this).attr('id');
  $('input.'+target).prop('checked', true);
});

Upvotes: 2

JYoThI
JYoThI

Reputation: 12085

Just use select as selector on change you can get the class name of current element and concat $('input.'+class_val) like this to check the same class checkbox 

$('select').on('change', function() {
  
class_val =  $(this).attr('class');
  $('input.'+class_val).prop('checked', true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>
  <input class="level" type="checkbox">This is
</label>
<select class="level">
 <option>select</option>
  <option>easy</option>
  <option>hard</option>
  <option>impossible</option>
</select>

<label>
  <input class="level1" type="checkbox">This is
</label>
<select class="level1">
  <option>select</option>
  <option>easy1</option>
  <option>hard1</option>
  <option>impossible1</option>
</select>

Upvotes: 2

Christof
Christof

Reputation: 2734

If you have single class for select, try this:

$('select').on('change', function() {
  $('input.'+$(this).prop('class')).prop('checked', true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>
  <input class="level" type="checkbox">This is
</label>
<select class="level">
  <option>easy</option>
  <option>hard</option>
  <option>impossible</option>
</select>

<label>
  <input class="asdfasdf" type="checkbox">This is
</label>
<select class="asdfasdf">
  <option>easy</option>
  <option>hard</option>
  <option>impossible</option>
</select>

Upvotes: 2

Curiousdev
Curiousdev

Reputation: 5778

Please find below snippet on change of select get selected value and find checkbox with the class with same class as selected value

$('.'+ $('.level').val()).prop('checked', true);
$('.level').on('change', function() {
$(".common").prop('checked',false);
  $('.'+ $(this).val()).prop('checked', true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>
  <input class="common easy" type="checkbox">easy
</label>
<label>
  <input class="common hard" type="checkbox">hard
</label>
<label>
  <input class="common impossible" type="checkbox">impossible
</label>
<select class="level">
  <option>easy</option>
  <option>hard</option>
  <option>impossible</option>
</select>

Upvotes: 2

Related Questions