如何选择/取消选择使用jQuery一个按钮的所有复选框？ [英] How to Select / Deselect All Checkboxes using jQuery with a one Button?
本文介绍了如何选择/取消选择使用jQuery一个按钮的所有复选框？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想使用单个按钮单击切换选择特定div /表格内的所有复选框并取消选中所有复选框。另外，我想要链接/或按钮将名称更改为全选和 '取消全选'。我已经看到类似的答案，使用复选框或两个不同的按钮点击，但没有为此。我会保持它简单和短的使用jQuery。
HTML
< body>< div id =main>< div id =first>< h1> Check&取消选中所有选项< / h1>< p>检查&取消所有选项按钮< / p>< input id =checkAlltype =buttonvalue =Check / Uncheck All>< div class =button>< input class =first id =Item 1name =option1type =checkbox>< label class =label1for =Item 1> Item 1< / label>< input class =first Item 2name =option1type =checkbox>< label class =label1for =Item 2> Item 2< / label>< input class =firstid =Item第3项< / label>< input class =firstid =Item 43name =option1type =checkbox>< label class =label1for =Item 3 name =option1type =checkbox>< label class =label1for =Item 4> Item 4< / label>< / div>< / body>
$（function（）{ $（document。）.on（'click'，'#checkAll'，function（）{if（$（this）.val（）=='Check All'）{$（'。button input'）。prop（'检查'，true）; $（this）.val（'Uncheck All'）; } else {$（'。button input'）。prop（'checked'，false）; $（this）.val（'全部检查'）; }}）; }）;
< script src =https：/ /ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js\"></script><body> < div id =main> < div id =first> < h1>检查&取消选中所有选项< / h1> < p>检查&取消选中所有选项按钮< / p> < input id =checkAlltype =buttonvalue =全部检查> < div class =button> < input class =firstid =Item 1name =option1type =checkbox> < label class =label1for =Item 1> Item 1< / label> < input class =firstid =Item 2name =option1type =checkbox> < label class =label1for =Item 2> Item 2< / label> < input class =firstid =Item 3name =option1type =checkbox> < label class =label1for =Item 3> Item 3< / label> < input class =firstid =Item 4name =option1type =checkbox> < label class =label1for =Item 4> Item 4< / label> < / body>
I would like to to use a single button click to toggle between selecting all check boxes within a particular div/table and deselecting all check boxes. In addition i wanted the link/or button to change names to 'Select All' & ' deselect All'. I've seen similar answers using check boxes or two different button clicks but nothing for this. I would to keep it simple and short using jquery.
HTML
<body> <div id="main"> <div id="first"> <h1>Check & Uncheck All Options</h1> <p>Check & Uncheck All Options by Button</p> <input id="checkAll" type="button" value="Check/Uncheck All "> <div class="button"> <input class="first" id="Item 1" name="option1" type="checkbox"> <label class="label1" for="Item 1">Item 1</label> <input class="first" id="Item 2" name="option1" type="checkbox"> <label class="label1" for="Item 2">Item 2</label> <input class="first" id="Item 3" name="option1" type="checkbox"> <label class="label1" for="Item 3">Item 3</label> <input class="first" id="Item 4" name="option1" type="checkbox"> <label class="label1" for="Item 4">Item 4</label> </div> </body>
解决方案How about like this:
$(function() { $(document).on('click', '#checkAll', function() { if ($(this).val() == 'Check All') { $('.button input').prop('checked', true); $(this).val('Uncheck All'); } else { $('.button input').prop('checked', false); $(this).val('Check All'); } }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <div id="main"> <div id="first"> <h1>Check & Uncheck All Options</h1> <p>Check & Uncheck All Options by Button</p> <input id="checkAll" type="button" value="Check All"> <div class="button"> <input class="first" id="Item 1" name="option1" type="checkbox"> <label class="label1" for="Item 1">Item 1</label> <input class="first" id="Item 2" name="option1" type="checkbox"> <label class="label1" for="Item 2">Item 2</label> <input class="first" id="Item 3" name="option1" type="checkbox"> <label class="label1" for="Item 3">Item 3</label> <input class="first" id="Item 4" name="option1" type="checkbox"> <label class="label1" for="Item 4">Item 4</label> </div> </body>
这篇关于如何选择/取消选择使用jQuery一个按钮的所有复选框？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
