javascript - count value of single subject from checkbox's data-id which is in string format separated by commas

Question

<div>
                                        
                                                <input type="checkbox" id="Q_1_ck1" value="R" data-id="Environmental Science, Physical Education, Agriculture, Yoga, ">
                                                <label class="custom-control-label" for="Q_1_ck1">
                                                
                                                    <div><small>Listening</small></div>
                                                </label>
                                            </div>
                                    
                                        <div>
                                            
                                                <input type="checkbox" id="Q_1_ck2" value="E" data-id="Entrepreneurship, Political Science, Agriculture, Business Administration, Salesmanship">
                                                <labe for="Q_1_ck2">
                                                
                                                    <div><small>Speaking</small></div>
                                                </label>
                                            
                                        </div>
                    
                    <div>
                                        
                                                <input type="checkbox" id="Q_1_ck3" value="S" data-id="History, Legal Studies, Mass Media Studies, Home Science, Food Nutrition and Dietetics, Foreign Languages, National Cadet Corps, Yoga">
                                                <labelfor="Q_1_ck3">
                                                
                                                    <div><small>Helping</small></div>
                                                </label>
                                            </div>
                                        

I have a above html code, in which there are values of data-id. Actually i want to count values of each data id.

For example : I want to count values of selected check boxes for yoga. 1st and 3rd checkbox data-id contains yoga, if both 1st and 3rd will be selected then yoga count will be 2. if only one checked then count will be 1.

I was using following code but it returns count only if there is one value in data-id. Now i have multiple values separated by commas.

var yoga = $(".multisteps-form__form input[data-id=Yoga]:checked").length;

标签： javascriptjquery

Answer 1

您可以使用attributeContainsWord ~这将匹配由空格或attributeContains分隔的任何单词*如果选择器的字符串出现在元素属性值中的任何位置，它将选择任何元素。

演示代码：

console.log($("input[data-id~=Yoga]:checked").length)
//or 
console.log($("input[data-id*=Yoga]:checked").length)

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


<input type="checkbox" id="Q_1_ck1" value="R" data-id="Environmental Science , Physical Education , Agriculture , Yoga " checked>

<input type="checkbox" id="Q_1_ck2" value="E" data-id="Entrepreneurship, Political Science, Agriculture , Business Administration, Salesmanship ">

<input type="checkbox" id="Q_1_ck3" value="S" data-id="History, Legal Studies, Mass Media Studies, Home Science, Food Nutrition and Dietetics, Foreign Languages, National Cadet Corps, Yoga" checked>