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

Question

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>

Answer 1

试试这个：

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

jsFiddle示例

Answer 2

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

JS:-

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

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/

Answer 4

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

如果是这样，你可以突出使用：

document.querySelector('input[checked]')

Answer 5

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

演示

$("div.mini-cog").slice(2).each(function () {
    $(this).filter(function () {
        return !$('input:checked', this).length
    }).hide();
});