当只有用户选择该特定复选框时，如何显示选择的项目的jquery复选框列表以及标签 [英] How to display the selected items of jquery checkbox list along with the label when only the user selects that particular checkbox

问题描述

 <form novalidate="novalidate" class="wpcf7-form" name="myForm"  id="myForm">
   <fieldset>
   <div class="form_field odd">
      <label for='desktop'>Desktops </label> 
      <div class="form-group">
         <select id="ms" multiple="multiple">
            <option value="1">Made to Order(assembled)</option>
            <option value="2">HP/Compaq</option>
            <option value="3">IBM</option>
            <option value="4">Lenovo </option>
            <option value="5">etc</option>
         </select>
      </div>
   </div>
   <div class="form_field even">
      <label for='server'>Servers </label> 
      <div class="form-group">
         <select id="ms1" multiple="multiple">
            <option value="1">Made to Order(assembled)</option>
            <option value="2">Compaq</option>
            <option value="3">IBM</option>
            <option value="4">etc</option>
         </select>
      </div>
   </div>
   <div class="form_field odd">
   <label for='laptop'>Laptops </label> 
   <div class="form-group">
      <select id="ms2" multiple="multiple">
         <option value="1">HP/Compaq</option>
         <option value="2">IBM</option>
         <option value="3">Lenovo</option>
         <option value="4">Sony</option>
         <option value="5">Dell </option>
         <option value="6">etc</option>
      </select>
   </div>
</form>

推荐答案

FIDDLE

$("select[name='qwe'] option").click(function () {
    $(this).each(function () {
        var label = $(this).parent().parent().parent().find('label').text();
        var text = $(this).text();
        alert('option text is ' + text);
        alert('label text is ' + label);
    });
})

code> UPDATE

UPDATE

如@mplungjan建议
FIDDLE

As @mplungjan suggested FIDDLE

$("select[name='qwe']").change(function () {
    $(this).each(function () {
        var text1 = $(this).find('option:selected').text();
        var label1 = $(this).find('option:selected').parent().parent().parent().find('label').text();
        alert('option text is ' + text1);
        alert('label text is ' + label1);
    });

UPDATE

否 .parent（）与 .closest（'div.classnameoftheparentdiv'）

FIDDLE

$("select[name='qwe']").change(function () {
    $(this).each(function () {
        var text1 = $(this).find('option:selected').text();
        var label1 = $(this).find('option:selected').closest('div.form_field').find('label').text();//HERE parent div that contains the label has a class form_field
        alert('option text is ' + text1);
        alert('label text is ' + label1);
    });
})

这篇关于当只有用户选择该特定复选框时，如何显示选择的项目的jquery复选框列表以及标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！