ドロップダウンから選択したチェックボックスを取得

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

また、このソリューションを試すことができます。チェックボックスのチェックボックスの要素リストが表示されます。また、このチェックされた要素リストを実行時に更新することもできます。 `javascript`または` jquery`を使用して

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>