How do I get an element from the list of element in js, which has a custom attribute?

Question

I want to get all element that has costume value attribute from list of same element in jQuery.

I have this following HTML form :

<label>name <input type="text" name="name" value="value"></label>
<label>value1 <input type="radio" name="name1" value="value1"></label>
<label>value2 <input type="radio" name="name1" value="value2"></label>
<label>value3 <input type="radio" name="name1" value="value3"></label>
<label>value4 <input type="checkbox" name="name2[]" value="value4"></label>
<label>value5 <input type="checkbox" name="name2[]" value="value5"></label>

And i did try this following code :

form = $('form');
form_data = {
    'name':'test value',
    'name1':'value2',
    'name2[check]':'value5',
};
$.each(form_data,function(i,v){
    input = form.find('[name="'+i+'"]');
    inputtype = input.attr('type');

    if(inputtype == 'checkbox' || inputtype == 'radio'){
        input.has('[value="'+v+'"]').prop('checked',true);
    }else{
        input.val(v);
    }
});

But when i try input.has('[value="'+v+'"]') for get same element attribute then i did not return any element to checked that element.. ! any solution for this..?

Answer 1

You can use filter , this will reduce the variable input to those only have a value that is equal to variable v

Here is the snippet.

 $(function() { var form = $('form'); var form_data = { 'name': 'test value', 'name1': 'value2', 'name2[]': 'value5', }; $.each(form_data, function(i, v) { var input = form.find('[name="' + i + '"]'); var inputtype = input.attr('type'); if (inputtype == 'checkbox' || inputtype == 'radio') { input.filter(function() {return this.value === v;}).prop('checked', true); } else { input.val(v); } }); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form> <label>name <input type="text" name="name" value="value"></label> <label>value1 <input type="radio" name="name1" value="value1"></label> <label>value2 <input type="radio" name="name1" value="value2"></label> <label>value3 <input type="radio" name="name1" value="value3"></label> <label>value4 <input type="checkbox" name="name2[]" value="value4"></label> <label>value5 <input type="checkbox" name="name2[]" value="value5"></label> </form>

For more docs: http://api.jquery.com/filter/