Question

创建了小提琴

我有一张2 <td>的桌子，在第一个我有标题，在第二个我有相应的项目相关，第一个总是显示，但第二个将只显示你所在的内容，因为示例国家/地区将显示国家/地区列表，当您单击语言时，它将显示国家/地区列表。

此处的国家/地区列表是复选框，语言是单选按钮。
问题：

我正在尝试将图像添加到相应的标题，只有当第二个中的任何项目处于选定状态时，无论是收音机还是使用jquery的复选框。

我已尝试选中已选中的任何输入复选框但不起作用。这里有什么建议，如何在这两个tds之间进行解析？

$("input:checked").each(function() {
             $("div.lnk").append("<img class='tick'></img>");

            });

Answer 1

你的小提琴不起作用有很多原因。

您使用的是JQuery语法，但您没有在框架和选择框架下选择JQuery
您的HTML存在问题，标签未正确关闭
您发布的javascript只运行一次，并且在页面加载时运行。它的含义是有效的＆＃34;当页面加载时，对于每个选中的复选框，将图像添加到每个链接＆＃34;这不是你想要的。如果有任何选定，您只需要一个图像用于正确的链接。

我通过一些更新来分配你的小提琴，包括添加JQuery和修改html。它应该具备您需要的基本功能。

http://jsfiddle.net/GLquL/1/

即，这里是相关的HTML：

<table>
    <tbody>
        <tr>
            <td width="30%">
                <div id="lnCont">
                    <div id="Country" class="lnk">Country <span class="shown-image">selected</span></div>
                    <div id="language" class="lnk">language <span class="shown-image">selected</span></div>
                    <div id="food" class="lnk">food</div>
                    <div id="Color" class="lnk">Color</div>
                </div>
            </td>
            <td>
               <div id="b_country" class="hidden inputs">
                   <div class="aaa">
                       <input type="checkbox" class="grp" value="USA" name="USA" id="id1" />
                       <label class="lbl " title="USA " data-name="USA " for="id1">USA</label>
                   </div>
                   <div class="aaa">
                       <input type="checkbox" class="grp " value="china" name="china" id="id1 " />
                       <label class="lbl" title="china" data-name="china" for="id1 ">china</label>
                   </div>
                </div>
                <div class="hidden inputs">
                </div>
            </td>
        </tr>
    </tbody>
</table>

Javascript：

// Make it so when you click on Country, the appropriate inputs are shown
$("#Country").click(function() {
    $(".inputs").addClass("hidden");
    $("#b_country").removeClass("hidden");
});

// We want this function to run every time a checkbox is checked or unchecked inside #b_country
function checkCountries() {

    if ($("#b_country input:checked").length > 0) {
        // There's at least one checked checkbox!
        $("#Country").addClass("active");
    } else {
        // No checked checkboxes at all. Let's get rid of our image.
        $("#Country").removeClass("active");
    }
}
// Run it now. There may be inputs that are checked by default!
checkCountries();

// Now, run that function each time an input changes its value inside #b_country
$("#b_country input").change(checkCountries);

还有一些CSS：

.hidden {display:none;}
.lnk {cursor:pointer;}
.lnk .shown-image {display:none;}
.lnk.active .shown-image {display:inline;}
#lnCont { width:130px;}

对于这个小提琴肯定会有改进，但它应该不仅适合你的情况，而且它将为你提供一个起点。

浏览使用jQuery

1 个答案: