在前两个不包含选中单选按钮后隐藏div

Question

JSFiddle

在前两个迷你齿轮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>

Answer 1

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

联合材料：-

$("div.mini-cog").slice(2).each(function () {
    if($(this).find(':input').not(':checked').length!=1)
        $(this).hide();
});

Answer 2

试一试：

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

jsFiddle实例

Answer 3

像这样的事怎么样：

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

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