时间戳

首页 > 解决方案 > 条件：输入：用同一个类检查

javascript - 条件：输入：用同一个类检查

问题描述

我想对我的一个谜有一点帮助。我有一个根据输入数量更改的按钮：选中但我想添加一个条件：选择同一类的复选框。

例如，我可以有 2 个或更多输入吗？

<input class="banana" type="checkbox" value="Cavendish">
<input class="banana" type="checkbox" value="Goldfinger">
<input class="chocolato" type="checkbox" value="cocoa powder">
<input class="chocolato" type="checkbox" value="milk chocolate">
<input class="apple" type="checkbox" value="honneycrisp">
<input class="apple" type="checkbox" value="granny smith">

我不能使用属性名称或值。无法修改输入。

条件：

$('input[type="checkbox"]').click(function(){

if($('input[type="checkbox"]:checked').length >=2){

////////
  if (my classes are the same) {
    $('#btn').html("click me").prop('disabled', false);
} else {
 
$('#btn').html("too bad").prop('disabled', true);
}
//////

}

我尝试

var checkClass = [];
        $.each($("input[type="checkbox"]:checked"), function() {
            checkClass.push($(this).attr('class'));
        });

我不知道我是否走对了路，或者我是否使代码复杂化，但欢迎提供一点帮助。目前我的尝试没有成功。

标签： javascriptjqueryinput

解决方案

类似的东西？

const 
   bt_restart = document.getElementById('bt-restart')
 , chkbx_all  = document.querySelectorAll('input[type=checkbox]')
 ;
var checked_class = ''
  ;
bt_restart.onclick = _ =>
  {
  checked_class = ''
  chkbx_all.forEach(cbx=>
    {
    cbx.checked=cbx.disabled=false
    cbx.closest('label').style = '' 
    })
  }
chkbx_all.forEach(cbx=>
  {
  cbx.onclick = e => 
    {
    if (checked_class === '')  checked_class = cbx.className 
    else if (checked_class != cbx.className  )
      {
      cbx.checked = false
      cbx.disabled = true
      cbx.closest('label').style = 'color: grey' 
      }
    }  
  })
<button id="bt-restart">restart</button>  <br> <br>

 <label>  <input class="banana"    type="checkbox" value="Cavendish"     > a-Cavendish      </label> <br>
 <label>  <input class="banana"    type="checkbox" value="Goldfinger"    > a-Goldfinger     </label> <br>
 <label>  <input class="chocolato" type="checkbox" value="cocoa powder"  > b-cocoa powder   </label> <br>
 <label>  <input class="chocolato" type="checkbox" value="milk chocolate"> b-milk chocolate </label> <br>
 <label>  <input class="apple"     type="checkbox" value="honneycrisp"   > c-honneycrisp    </label> <br>
 <label>  <input class="apple"     type="checkbox" value="granny smith"  > c-granny smith   </label> <br>

推荐阅读