Question

您好我正在为每个复选框设置一个点击对话框。每个人都会得到他们的信息。我正在尝试创建一个，我正在尝试的是Blue

   <fieldset class="boxoflist">
    <legend>list</legend>
    <li class="field">
        <label class="help">Please select the ones that apply to you</label>
                <label class="listbox " for="check5">
                <input type="checkbox" name="list[]" value="5">

            <span></span>
            Blue
            </label>

                <label class="listbox " for="check1">
                <input type="checkbox" name="list[]" value="1">

            <span></span>

            red
            </label>

                <label class="listbox " for="check6">
                <input type="checkbox" name="list[]" value="6">

            <span></span>

            pink
            </label>

                <label class="listbox " for="check3">
                <input type="checkbox" name="list[]" value="3">

            <span></span>
            Any
            </label>   
    </li>
 </fieldset>



 <div id="Any-helper">
    <p>S'il vous plaît expliquez ci-dessous ce que vous avez idée de couleur dans le mélange, avec une d   escription claire </p>
    </div>

我试过了

   $(function() {
    $(".listbox").click(function(){
        $('#Any-helper').dialog ({
        height: 140,
        modal: true
         });
    });
});

Answer 1

试试这个：将红色，蓝色等...消息放在带有“消息”类的范围内，并在每次单击时更新消息。（“#message_container”是对话框中消息容器的id。）

$(function() {
    $(".listbox").click(function(){
    var message = $(this).children('span.messages').html();
    $('#Any-helper #message_container').html(message);
            $('#Any-helper').dialog ({
            height: 140,
            modal: true
         });
    });
});

Answer 2

更新：Working Demo of your question

在HTML中导入以下脚本：

<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">

CHECK：

HTML：

<fieldset class="checkbox">
    <legend>list</legend>
    <li class="field">
        <label class="help">Please select the ones that apply to you</label>
                <label class="listbox " for="check5">


            <span></span>
            Blue
            </label>

                <label class="listbox " for="check1">
                <input type="checkbox" name="list[]" value="1" id="blue">

            <span></span>

            red
            </label>

                <label class="listbox " for="check6">
                <input type="checkbox" name="list[]" value="6" id="red">

            <span></span>

            pink
            </label>

                <label class="listbox " for="check3">
                <input type="checkbox" name="list[]" value="3" id="pink">

            <span></span>
            Any
            </label>   
    </li>
</fieldset>




<div id="Any-helper">
<p>S'il vous plaît expliquez ci-dessous ce que vous avez idée de couleur dans le mélange, avec une d   escription claire </p>
</div>

Jquery的：

$(function() {

$( "#Any-helper" ).dialog({
  autoOpen: false,
  height: 300,
  width: 350,
  modal: true
});
$( "#blue" ).click(function() 
  {
    $( "#Any-helper" ).dialog( "open" );
  });
});

单击对话框

2 个答案: