Получить выделенные флажки из выпадающего списка

Question

У меня есть флажки внутри выпадающего меню. Я получить флажки, которые выбраны (проверено)

Код:

<ul role="menu" class="dropdown-menu" id="comp"> 
    <li><a href="#"> 
     <input type="checkbox"> 
     <span class="lbl"> Monday</span> 
     </a> 
    </li> 
    <li><a href="#"> 
     <input type="checkbox"> 
     <span class="lbl"> Tuesday</span> 
     </a> 
    </li> 
    <li><a href="#"> 
     <input type="checkbox"> 
     <span class="lbl"> Wednesday</span> 
     </a> 
    </li> 
    <li><a href="#"> 
     <input type="checkbox"> 
     <span class="lbl"> Thursday</span> 
     </a> 
    </li> 
    <li><a href="#"> 
     <input type="checkbox"> 
     <span class="lbl"> Friday</span> 
     </a> 
    </li> 
</ul> 
<input type="submit" class="btn btn-info" onclick="myFunction()" value="Submit"> 
<script type="text/javascript"> 
    function myFunction() 
    { 
    /* Get selected check boxes here */ 
    } 
</script> 

Answer 1

Попробуйте, это будет возвращать все выбранные значения флажка при выборе любого флажка:

<ul role="menu" class="dropdown-menu" id="comp"> 
    <li><a href="#"> 
    <input name="chklist" onclick="get_selected_val()" value="monday" type="checkbox"> 
    <span class="lbl"> Monday</span> 
    </a></li> 
    <li><a href="#"> 
    <input name="chklist" onclick="get_selected_val()" value="tuesday" type="checkbox"> 
    <span class="lbl"> Tuesday</span> 
    </a></li> 
    <li><a href="#"> 
    <input name="chklist" value="wednesday" onclick="get_selected_val()" type="checkbox"> 
    <span class="lbl"> Wednesday</span> 
    </a></li> 
    <li><a href="#"> 
    <input name="chklist" onclick="get_selected_val()" value="thursday" type="checkbox"> 
    <span class="lbl"> Thursday</span> 
    </a></li> 
    <li><a href="#"> 
    <input name="chklist" onclick="get_selected_val()" value="friday" type="checkbox"> 
    <span class="lbl"> Friday</span> 
    </a></li> 
</ul> 


function get_selected_val() { 
$('input[name="chklist"]:checked').each(function() { 
    console.log(this.value); 
}); 
} 

Answer 2

Проверьте console на выбранные checkboxes.

function myFunction(){ 
 
    var checkBoxes=$("#comp input[type=checkbox]:checked"); 
 
    console.log(checkBoxes); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul role="menu" class="dropdown-menu" id="comp"> 
 
    <li><a href="#"> 
 
     <input type="checkbox"> 
 
     <span class="lbl"> Monday</span> 
 
     </a> 
 
    </li> 
 
    <li><a href="#"> 
 
     <input type="checkbox"> 
 
     <span class="lbl"> Tuesday</span> 
 
     </a> 
 
    </li> 
 
    <li><a href="#"> 
 
     <input type="checkbox"> 
 
     <span class="lbl"> Wednesday</span> 
 
     </a> 
 
    </li> 
 
    <li><a href="#"> 
 
     <input type="checkbox"> 
 
     <span class="lbl"> Thursday</span> 
 
     </a> 
 
    </li> 
 
    <li><a href="#"> 
 
     <input type="checkbox"> 
 
     <span class="lbl"> Friday</span> 
 
     </a> 
 
    </li> 
 
</ul> 
 
<input type="submit" class="btn btn-info" onclick="myFunction()" value="Submit">

Answer 3

Вы можете попробовать это решение также. Здесь вы увидите список элементов checkbox. Вы также можете обновить этот список проверенных элементов во время выполнения.

Проверьте следующее демо:

Fiddle Demo

Пример стека

$(function() { 
 
    var checkedItems = $("#comp input:checked"); 
 
    console.log(checkedItems); 
 
    $("#comp input[type='checkbox']").change(function() { 
 
    if ($(this).attr("checked") == "checked") { 
 
     checkedItems.push($(this)[0]);//Add the checked element 
 
     console.log(checkedItems); 
 
    } else { 
 
     checkedItems.splice($.inArray($(this)[0], checkedItems), 1);//Remove the unchecked element 
 
     console.log(checkedItems); 
 
    } 
 
    }) 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
 
<ul role="menu" class="dropdown-menu" id="comp"> 
 

 
    <li> 
 
    <a href="#"> 
 
     <input type="checkbox" id="a1"> 
 
     <span class="lbl"> Monday</span> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="#"> 
 
     <input type="checkbox" id="a2"> 
 
     <span class="lbl"> Tuesday</span> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="#"> 
 
     <input type="checkbox" id="a3" checked="checked"> 
 
     <span class="lbl"> Wednesday</span> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="#"> 
 
     <input type="checkbox" id="a4"> 
 
     <span class="lbl"> Thursday</span> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="#"> 
 
     <input type="checkbox" id="a5"> 
 
     <span class="lbl"> Friday</span> 
 
    </a> 
 
    </li> 
 

 

 
</ul>