Question

javascript获取复选框的值，如果选中但没有点击按钮

我在项目中间受到了打击，请帮助..

如何从类名或通过名称或通过警告获取复选框值，以便我可以传递特定值...

我很抱歉问。我是新的jquery和javascript ..

这是我的HTML ...

<input type="checkbox" name='cbox' value="red" class="theClass"/>red
<input type="checkbox" name='cbox' value="green" class="theClass"/>green
<input type="checkbox" name='cbox' value="yer" class="theClass"/>yer
<input type="checkbox" name='cbox' value="asdasd" class="theClass"/>asdasd
<input type="checkbox" name='cbox' value="radgdfged" class="theClass"/>radgdfged
$(function(){

$('input[type=checkbox]').on('change', function() {
   alert($(this).val());
    console.log($(this).val());
});

});

我用Google搜索了很多...但是每次点击按钮都会获得所有复选框值。我使用onclick按钮获取值....但是在不使用按钮的情况下获取值... 如果选中复选框，我的担忧就是获取值

例如：如果我检查了红色，我应该得到警告＆＃39;红色＆＃39; .....

Answer 1

jQuery：

$('input[type=checkbox]').on('change', function() {
    console.log($(this).val());
});

<强>使用Javascript：

var cbs = document.querySelectorAll('input[type=checkbox]');
for(var i = 0; i < cbs.length; i++) {
    cbs[i].addEventListener('change', function() {
        console.log(this.value);
    });
}

编辑：

如果仅在选中复选框时才需要该值。

jQuery：

$('input[type=checkbox]').on('change', function() {
    if($(this).is(':checked'))
        console.log($(this).val());
});

Javascript：

var cbs = document.querySelectorAll('input[type=checkbox]');
for(var i = 0; i < cbs.length; i++) {
    cbs[i].addEventListener('change', function() {
        if(this.checked)
            console.log(this.value);
    });
}

jsfiddle DEMO

P.S。为jQyery把你的代码放在里面：

$(function() {
    //code here
});

Answer 2

尝试：

<input type="checkbox" name='cbox' value="red" class="theClass" onchange="alert(this.value)"/>red

demo

修改

<input type="checkbox" name='cbox' value="red" class="theClass" onchange="this.checked?alert(this.value):null"/>red

demo

修改

提醒所有选中的输入值：

$('input[type=checkbox]').on('change', function() { if($(this).is(':checked')){ var values = []; $.each($('input:checked'),function(index,input){ values.push(input.value); }); alert(values.join(',')); } });

demo

Answer 3

如果您需要更换所有选中的复选框，可以使用：

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

<强> Working Demo

Answer 4

<强> HTML

<input type="checkbox" name='cbox' value="red" class="theClass" checked/>

<强>的jQuery

$(function() {
    $(":checkbox").each(function() {
        alert($(this).val())
    });
});

Answer 5

如果选中没有点击按钮，则Javascript获取复选框的值这段代码工作正常。试试这个

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>jQuery Get Values of Selected Checboxes</title>

<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>

<script type="text/javascript">

    $(document).ready(function() {

         $("input[type=checkbox]").change( function() {
                  var values = [];
                $.each($('input:checked'),function(index,input){
                    values.push(input.value);
                 });
             alert(values.join(','));

            var n = $( "input:checked" ).length;
            alert(n);
          });
    });

</script>

</head>

<body>

   <form id="booking_form">
        <input type="checkbox" name="bType" id="bType" value="A,200">&nbsp;Type A - USD200<br>
        <input type="checkbox" name="bType" id="bType" value="B,150">&nbsp;Type B - USD150<br>
        <input type="checkbox" name="bType" id="bType" value="C,100">&nbsp;Type C - USD100<br>
        <input type="checkbox" name="bType" id="bType" value="D,50">&nbsp;Type D - USD50<br>

    </form>

</body>

</html>

Preeti Dua

如果选中没有点击按钮，则javascript获取复选框的值

5 个答案: