如何添加和删除类使用复选框

我有一个复选框，我想只有一个复选框被标记出现按钮“提交”，当多个框被选中时，按钮'提交'必须消失，我用它和addClass提供removeClass的jQuery试图代码，这里是我的代码现在：如何添加和删除类使用复选框

$('.a').click(function() { 
 
    $('.c').removeClass('b'); 
 
});

.b { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div class="checkbox"> 
 
    <form method="post"> 
 
    <fieldset> 
 
     <legend>What is Your Favorite Pet?</legend> 
 
     <input type="checkbox" name="animal" value="Cat" class="a" />Cats 
 
     <br /> 
 
     <input type="checkbox" name="animal" value="Dog" class="a" />Dogs 
 
     <br /> 
 
     <input type="checkbox" name="animal" value="Bird" class="a" />Birds 
 
     <br /> 
 
     <input type="submit" value="Submit now" class="c b" /> 
 
     <button>Cancel</button> 
 
    </fieldset> 
 
    </form> 
 
</div>

来源

2016-01-08 DevRyu

如果我可以切换submit按钮很直率，因为你显然只想要提交一个字段，为什么是y ou使用复选框？当用户被允许检查多个字段时，通常使用复选框。如果您只想在用户选择一个时提交，为什么不限制用户只能使用单选按钮选择一个？ – Glubus

@Glubus，因为我的使用案例得到了这个流量，当我检查一个复选框时，按钮提交必须出现，我必须遵循我的用例，没有例外，谢谢你的另一个解决方案。 – DevRyu

我明白了，你不能建议修改用例。这个结果很可能会给用户使用这个功能造成混淆。 – Glubus

你做错了。如果您只想选择一个复选框，则需要在.a上附加事件，没错。但...查看下面的代码：

$('.a').click(function() { 
 
    if ($(".a:checked").length == 1) 
 
    $('.c').removeClass('b'); 
 
    else 
 
    $('.c').addClass('b'); 
 
});

.b { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div class="checkbox"> 
 
    <form method="post"> 
 
    <fieldset> 
 
     <legend>What is Your Favorite Pet?</legend> 
 
     <input type="checkbox" name="animal" value="Cat" class="a" />Cats 
 
     <br /> 
 
     <input type="checkbox" name="animal" value="Dog" class="a" />Dogs 
 
     <br /> 
 
     <input type="checkbox" name="animal" value="Bird" class="a" />Birds 
 
     <br /> 
 
     <input type="submit" value="Submit now" class="c b" /> 
 
     <button>Cancel</button> 
 
    </fieldset> 
 
    </form> 
 
</div>

来源

2016-01-08 12:46:20

谢谢，它确实有效。 – DevRyu

@DevRyu欢迎您！ '：）' –

你要根据条件$('.a:checked').length != 1

$('.a').on('change', function() { 
 
    $('.c').toggleClass('b', $('.a:checked').length != 1); 
 
});

.b { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div class="checkbox"> 
 
    <form method="post"> 
 
    <fieldset> 
 
     <legend>What is Your Favorite Pet?</legend> 
 
     <input type="checkbox" name="animal" value="Cat" class="a" />Cats 
 
     <br /> 
 
     <input type="checkbox" name="animal" value="Dog" class="a" />Dogs 
 
     <br /> 
 
     <input type="checkbox" name="animal" value="Bird" class="a" />Birds 
 
     <br /> 
 
     <input type="submit" value="Submit now" class="c b" /> 
 
     <button>Cancel</button> 
 
    </fieldset> 
 
    </form> 
 
</div>

来源

2016-01-08 13:00:56 PeterKA

谢谢，它也能工作！ – DevRyu

如何添加和删除类使用复选框

回答

相关问题