0

JSFiddle

在前两个 mini-cog div 之后，如果未选中其中包含的单选按钮，我希望它隐藏 div，但它只是在前 2 个之后隐藏所有 div（第 5 个被选中，因此在此示例中不应隐藏它）。

jQuery :

$("div.mini-cog").slice(2).each(function () {

    // this is hiding Radio Button Question 5, but since its checked i want it to appear
    // $(this).find(':input').not(':checked').parent('div').hide();
});

HTML：

<form method="post" action="">
    <div id="question-1" class="mini-cog">
         <h4>Radio Button Question 1</h4>

        <label for="radio-choice-1-a" class="checkbox inline">Choice 1
            <input type="radio" name="radio-choice-1" id="radio-choice-1-a" tabindex="2" value="choice-1" />
        </label>
        <label for="radio-choice-1-b" class="checkbox inline">Choice 2
            <input type="radio" name="radio-choice-1" id="radio-choice-1-b" tabindex="3" value="choice-2" />
        </label>
    </div>
    <div id="question-2" class="mini-cog">
         <h4>Radio Button Question 2</h4>

        <label for="radio-choice-2-a">Choice 1</label>
        <input type="radio" name="radio-choice-2" id="radio-choice-2-a" tabindex="2" value="choice-1" />
        <label for="radio-choice-2-b">Choice 2</label>
        <input type="radio" name="radio-choice-2" id="radio-choice-2-b" tabindex="3" value="choice-2" />
    </div>
    <div id="question-3" class="mini-cog">
         <h4>Radio Button Question 3</h4>

        <label for="radio-choice-3-a">Choice 1</label>
        <input type="radio" name="radio-choice-3" id="radio-choice-3-a" tabindex="2" value="choice-1" />
        <label for="radio-choice-3-b">Choice 2</label>
        <input type="radio" name="radio-choice-3" id="radio-choice-3-b" tabindex="3" value="choice-2" />
    </div>
    <div id="question-4" class="mini-cog">
         <h4>Radio Button Question 4</h4>

        <label for="radio-choice-4-a">Choice 1</label>
        <input type="radio" name="radio-choice-4" id="radio-choice-4-a" tabindex="2" value="choice-1" />
        <label for="radio-choice-4-b">Choice 2</label>
        <input type="radio" name="radio-choice-4" id="radio-choice-4-b" tabindex="3" value="choice-2" />
    </div>
    <div id="question-5" class="mini-cog">
         <h4>Radio Button Question 5</h4>

        <label for="radio-choice-5-a">Choice 1</label>
        <input type="radio" name="radio-choice-5" id="radio-choice-5-a" tabindex="2" value="choice-1" checked="checked" />
        <label for="radio-choice-5-b">Choice 2</label>
        <input type="radio" name="radio-choice-5" id="radio-choice-5-b" tabindex="3" value="choice-2" />
    </div>
</form>
4

5 回答 5

1

试试这个：

if ($(this).find(':input:checked').val() === undefined) $(this).hide();

jsFiddle 示例

于 2013-04-26T17:13:25.677 回答
0

像这样的东西怎么样：

$("div.mini-cog:gt(1)").filter(function () {
    if($(this).find('input:not(:checked)').length > 1)
        return this;
}).hide();

演示：http: //jsfiddle.net/dirtyd77/e755d/63/

于 2013-04-26T17:16:23.777 回答
0

试试这个：- http://jsfiddle.net/adiioo7/e755d/61/

JS：-

$("div.mini-cog").slice(2).each(function () {
    if($(this).find(':input').not(':checked').length!=1)
        $(this).hide();
});
于 2013-04-26T17:16:50.870 回答
0

这是你想要的：http: //jsfiddle.net/e755d/59/

如果是这样，您可以使用：

document.querySelector('input[checked]')
于 2013-04-26T17:17:16.510 回答
0

奇怪，没人用filter()吗？ 编辑 我没有看到 Dom 的回答，我很抱歉

演示

$("div.mini-cog").slice(2).each(function () {
    $(this).filter(function () {
        return !$('input:checked', this).length
    }).hide();
});
于 2013-04-26T17:20:04.413 回答