本文由 发布，转载请注明出处，如有问题请联系我们！ 发布时间: 2021-08-01js判断单选框checkbox是否选中-详解checkbox选中和不选中

在多选框中完成都选和无选。

前端工程师工作人员必须挑选好几个框中的所有或不挑选。这儿，达到下列规定:

当客户勾上“都选”时，全自动选定全部语言表达，并把“都选”变为“全不选”；当客户除掉“全不选”时，全自动不选定全部语言表达；当客户点一下“全选”时，全自动把全部语言表达情况翻转（选定的变成未选，未选的变成选定）；当客户把全部语言表达都手动式勾处时，“都选”被全自动勾上，并变成“全不选”；当客户手动式除掉选定最少一种语言表达时，“全不选”全自动被除掉选定，并变成“都选”。

编码一部分如下所示:

挑选要想了解的计算机语言：

都选，不选择和翻转。

Java Script语言表达

电子计算机计算机语言

绿宝石

哈斯拉斯

方案

使听从

最先获得dom原素。

var form = $('#test-form'), langs = form.find('[name=lang]'), selectAll = form.find('label.selectAll :checkbox'), selectAllLabel = form.find('label.selectAll span.selectAll'), deselectAllLabel = form.find('label.selectAll span.deselectAll'), invertSelect = form.find('a.invertSelect');

都选或不都选完成起來比较简单。应用jquery目标的prop方式设定选定情况。必须特别注意的是，这儿不可以应用attr()方式:

// 都选与全不选 selectAll.on("change",()=>{ if(selectAll.prop("checked")) { //都选 langs.prop("checked",true) selectAllLabel.hide() deselectAllLabel.show() }else{ // 全不选 langs.prop("checked",false) selectAllLabel.show() deselectAllLabel.hide() } })

反大选的办法也非常简单:

invertSelect.on("click",()=>{ //jquery目标要先应用Array.from方式转化成二维数组，运用二维数组来解析xml //必须特别注意的是，解析xml的每一个原素是dom目标，而不是jquery目标了, //不可以再应用prop方式了 Array.from(langs).forEach(item=>item.checked=!item.checked) })

当客户手动式启用全部语言表达时，“都选”会全自动启用并变成“无挑选”。为了更好地完成这一规定，必须将变动事情关联到全部名字为lang的checkbox目标(lang)。当事情被激发时，应当解析xml全部语言表达。假如所有选定，“都选”将被全自动选定并变成“无挑选”。在这里获得处在选定情况的全部勾选框，您还可以应用$ ('[name = lang]: checked ')。编码如下所示:

var langsChecked = $('[name=lang]:checked') //假如选定的checkbox总数大于5，就是所有选定 if(langsChecked.length>=5){ //都选打钩 selectAll.prop("checked",true) //都选标识掩藏 selectAllLabel.hide() //全不选标识表明 deselectAllLabel.show() }else{ //都选除掉勾 selectAll.prop("checked",false) //都选标识表明 selectAllLabel.show() //全不选标识掩藏 deselectAllLabel.hide() }

为了更好地防止与以前的编码表明矛盾，将其封裝为一个方式，以前的编码也必须采用这一方式。详细的编码如下所示:

$(function(){ var form = $('#test-form'), langs = form.find('[name=lang]'), selectAll = form.find('label.selectAll :checkbox'), selectAllLabel = form.find('label.selectAll span.selectAll'), deselectAllLabel = form.find('label.selectAll span.deselectAll'), invertSelect = form.find('a.invertSelect'); // 都选与全不选 selectAll.on("change",()=>{ if(selectAll.prop("checked")) { //都选 langs.prop("checked",true) selectAllLabel.hide() deselectAllLabel.show() }else{ // 全不选 langs.prop("checked",false) selectAllLabel.show() deselectAllLabel.hide() } select() }) //全选 invertSelect.on("click",()=>{ //jquery目标要先应用Array.from方式转化成二维数组，运用二维数组来解析xml //必须特别注意的是，解析xml的每一个原素是dom目标，而不是jquery目标了, //不可以再应用prop方式了 Array.from(langs).forEach(item=>item.checked=!item.checked) select() }) //当客户把全部语言表达都手动式勾处时，“都选”被全自动勾上，并变成“全不选”； //当客户手动式除掉选定最少一种语言表达时，“全不选”全自动被除掉选定，并变成“都选”。 function select(){ var langsChecked = $('[name=lang]:checked') console.log(langsChecked) //假如选定的checkbox总数大于5，就是所有选定 if(langsChecked.length>=5){ selectAll.prop("checked",true) selectAllLabel.hide() deselectAllLabel.show() }else{ selectAll.prop("checked",false) selectAllLabel.show() deselectAllLabel.hide() } } langs.change(select)})