Добавление флажка Значение jQuery

Question

У меня есть функция, которая предупреждает пользователя обо всех значениях, которые они проверили, из флажков. Например, если пользователь выбирает «1» и «2», тогда он должен предупреждать «1, 2», или если пользователь выбирает «1» и «3», он должен предупредить 1, 3 и т. Д. Однако он не работает. Любая помощь будет оценена :)

<form> 
    <input class="1" type="checkbox" name="1" value="1" onclick="add()">1 
    <input class="2" type="checkbox" name="2" value="2" onclick="add()">2 
    <input class="3" type="checkbox" name="3" value="3" onclick="add()">3 
    <input class="4" type="checkbox" name="4" value="4" onclick="add()">4 
</form> 

Вот jsfiddle.

Answer 1

$('input:checkbox').on('change', function() { 
 
    var chkd = $('input:checkbox:checked'); 
 
    if(chkd.length == 2) { 
 
     var vals = chkd.map(function() { 
 
      return this.value; 
 
     }) 
 
     .get().join(', '); 
 
     alert(vals); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
    <input class="1" type="checkbox" name="1" value="1"/>1 
 
    <input class="2" type="checkbox" name="2" value="2"/>2 
 
    <input class="3" type="checkbox" name="3" value="3"/>3 
 
    <input class="4" type="checkbox" name="4" value="4"/>4 
 
</form>

UPDATE

$(function() { 
    $('#myButton').on('click', function() { 
     var text = $('input[name=somename]').val(); 
     var chkd = $('input:checkbox:checked'); 
     var vals = chkd.map(function() { 
      return this.value; 
     }) 
     .get().join(', '); 
     alert("Name: " + text + "\n" + "Checkbox: " + vals); 
    }); 
}); 

DEMO

Answer 2

function add() { 
 
    var checked = ''; 
 
    $(':checked').each(function() { 
 
    checked += $(this).val() + ','; 
 
    }); 
 
    console.log(checked); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<input class="1" type="checkbox" name="1" value="1" onclick="add()">1 
 
<input class="2" type="checkbox" name="2" value="2" onclick="add()">2 
 
<input class="3" type="checkbox" name="3" value="3" onclick="add()">3 
 
<input class="4" type="checkbox" name="4" value="4" onclick="add()">4

Answer 3

Вы можете просто сделать, как показано ниже.

$(':checkbox').click(function() { 
    alert($(':checkbox:checked').map(function() { 
     return this.value; 
    }).get()); 
}); 

The demo.

Answer 4

Еще один способ заключается в следующем:

$("input[type='checkbox']").change(function() { 
 
    $(':checked').each(function() { 
 
    alert($(this).val()); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input class="footboard" type="checkbox" name="1" value="1">1 
 
<input class="drawers" type="checkbox" name="2" value="2">2 
 
<input class="casters" type="checkbox" name="3" value="3">3 
 
<input class="squeak" type="checkbox" name="4" value="4">4