Question

这是我的选择选项代码，如何阅读所选选项的文本。两者都来自两个独立的div

<div id="eligiblebranch_checklist" style="position: relative; height: 92.2333px; width: 359.35px;" class="checklist">
    <ul class="checklist">
        <li tabindex="0" class="even"><input value="1" name="eligiblebranch[]" id="eligiblebranch_1" type="checkbox"><label for="eligiblebranch_1" class="leaveRoomForCheckbox"> Computer Science Engineering </label></li>
        <li tabindex="0" class="odd"><input value="2" name="eligiblebranch[]" id="eligiblebranch_2" type="checkbox"><label for="eligiblebranch_2" class="leaveRoomForCheckbox"> Chemical Engineering </label></li>
        <li tabindex="0" class="even"><input value="3" name="eligiblebranch[]" id="eligiblebranch_3" type="checkbox"><label for="eligiblebranch_3" class="leaveRoomForCheckbox"> Civil Engineering </label></li>
        <li tabindex="0" class="odd"><input value="4" name="eligiblebranch[]" id="eligiblebranch_4" type="checkbox"><label for="eligiblebranch_4" class="leaveRoomForCheckbox"> Electrical Engineering </label></li>
        <li tabindex="0" class="even"><input value="5" name="eligiblebranch[]" id="eligiblebranch_5" type="checkbox"><label for="eligiblebranch_5" class="leaveRoomForCheckbox"> Electronics &amp; Communication Engineering </label></li>
        <li tabindex="0" class="odd"><input value="6" name="eligiblebranch[]" id="eligiblebranch_6" type="checkbox"><label for="eligiblebranch_6" class="leaveRoomForCheckbox"> Mechanical Engineering </label></li>
    </ul>
</div>

Answer 1

map，get和join可以解决问题。

var selected = $('input[type=checkbox]:checked').map(function(){
      return $(this).next('label').text();
}).get().join(",");

＆＃13;

$('button').click(function(){
  var selected = $('input[type=checkbox]:checked').map(function(){
      return $(this).next('label').text();
  }).get().join(",");
  console.log(selected);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="eligiblebranch_checklist" style="position: relative; height: 92.2333px; width: 359.35px;" class="checklist">
    <ul class="checklist">
        <li tabindex="0" class="even"><input value="1" name="eligiblebranch[]" id="eligiblebranch_1" type="checkbox"><label for="eligiblebranch_1" class="leaveRoomForCheckbox"> Computer Science Engineering </label></li>
        <li tabindex="0" class="odd"><input value="2" name="eligiblebranch[]" id="eligiblebranch_2" type="checkbox"><label for="eligiblebranch_2" class="leaveRoomForCheckbox"> Chemical Engineering </label></li>
        <li tabindex="0" class="even"><input value="3" name="eligiblebranch[]" id="eligiblebranch_3" type="checkbox"><label for="eligiblebranch_3" class="leaveRoomForCheckbox"> Civil Engineering </label></li>
        <li tabindex="0" class="odd"><input value="4" name="eligiblebranch[]" id="eligiblebranch_4" type="checkbox"><label for="eligiblebranch_4" class="leaveRoomForCheckbox"> Electrical Engineering </label></li>
        <li tabindex="0" class="even"><input value="5" name="eligiblebranch[]" id="eligiblebranch_5" type="checkbox"><label for="eligiblebranch_5" class="leaveRoomForCheckbox"> Electronics &amp; Communication Engineering </label></li>
        <li tabindex="0" class="odd"><input value="6" name="eligiblebranch[]" id="eligiblebranch_6" type="checkbox"><label for="eligiblebranch_6" class="leaveRoomForCheckbox"> Mechanical Engineering </label></li>
    </ul>
</div>
<br/><br/>
<button>Get selected</button>

＆＃13;

Answer 2

我不是100％确定你到底想要什么，但我尝试用：

var labelText = $(".checklist :checkbox:checked").siblings("label").text();

Answer 3

试试这个：

$(document).ready(function() {
    
    $("input[type=checkbox]").on("change",function(){
        
         var text = "";
        
        $("input[type=checkbox]:checked").each(function(){
            
              text += $(this).next().text() + " ";
            
          });
         
          console.log(text);
         
    })
     
})

<div id="eligiblebranch_checklist" style="position: relative; height: 92.2333px; width: 359.35px;" class="checklist">
    <ul class="checklist">
        <li tabindex="0" class="even"><input value="1" name="eligiblebranch[]" id="eligiblebranch_1" type="checkbox"><label for="eligiblebranch_1" class="leaveRoomForCheckbox"> Computer Science Engineering </label></li>
        <li tabindex="0" class="odd"><input value="2" name="eligiblebranch[]" id="eligiblebranch_2" type="checkbox"><label for="eligiblebranch_2" class="leaveRoomForCheckbox"> Chemical Engineering </label></li>
        <li tabindex="0" class="even"><input value="3" name="eligiblebranch[]" id="eligiblebranch_3" type="checkbox"><label for="eligiblebranch_3" class="leaveRoomForCheckbox"> Civil Engineering </label></li>
        <li tabindex="0" class="odd"><input value="4" name="eligiblebranch[]" id="eligiblebranch_4" type="checkbox"><label for="eligiblebranch_4" class="leaveRoomForCheckbox"> Electrical Engineering </label></li>
        <li tabindex="0" class="even"><input value="5" name="eligiblebranch[]" id="eligiblebranch_5" type="checkbox"><label for="eligiblebranch_5" class="leaveRoomForCheckbox"> Electronics &amp; Communication Engineering </label></li>
        <li tabindex="0" class="odd"><input value="6" name="eligiblebranch[]" id="eligiblebranch_6" type="checkbox"><label for="eligiblebranch_6" class="leaveRoomForCheckbox"> Mechanical Engineering </label></li>
    </ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

根据select选项

3 个答案: