Question

我有一些复选框，一周中的每一天都有一个复选框。我必须检查unsig Jquery选择哪一个并在标签上写下所有选中的项值。我尝试了不同的方式，但没有一个工作。这是复选框的代码

<div class="row">
    <div class="col-md-12">
        <div id="format">
            <div class="col-md-1 col-centered celleSettimana">
                <input type="checkbox" id="checkLunedi" class="lunedi1 giornoSettimana" value="lunedi">
                <label for="checkLunedi" class="cella">LUNEDI</label>
            </div>
            <div class="col-md-1 col-centered celleSettimana">
                <input type="checkbox" id="ceckMartedi" class="giornoSettimana" value="martedi">
                <label for="ceckMartedi" class="cella">MARTEDI</label>
            </div>
            <div class="col-md-1 col-centered celleSettimana">
                <input type="checkbox" id="checkMercoledi" class="giornoSettimana" value="mercoledi">
                <label for="checkMercoledi" class="cella">MERCOLEDI</label>
            </div>

            <div class="col-md-1 col-centered celleSettimana">
                <input type="checkbox" id="checkGiovedi" class="giornoSettimana" value="giovedi">
                <label for="checkGiovedi" class="cella">GIOVEDI</label>
            </div>

            <div class="col-md-1 col-centered celleSettimana">
                <input type="checkbox" id="checkVenerdi" class="giornoSettimana" value="venerdi">
                <label for="checkVenerdi" class="cella">VENERDI</label>
            </div>

            <div class="col-md-1 col-centered celleSettimana">
                <input type="checkbox" id="checkSabato" class="giornoSettimana" value="sabato">
                <label for="checkSabato" class="cella">SABATO</label>
            </div>

            <div class="col-md-1 col-centered celleSettimana">
                <input type="checkbox" id="checkDomenica" class="giornoSettimana" value="domenica">
                <label for="checkDomenica" class="cella">DOMENICA</label>
            </div>
        </div>
    </div>
</div>

有人可以帮助我吗？

Answer 1

您可以向复选框添加事件侦听器，然后使用.is(':checked')检查复选框的状态是否已更改。

var label = $('#daysSelected');
//listening to click events
$('input:checkbox').on('click', function(){
  var labels = [];
  //looping over all the checkboxes
  $('input:checkbox').each(function(){
    var checkbox = $(this);
    if( checkbox.is(':checked')){
      //storing the selected labels of respective checkboxes
      labels.push(checkbox.next('label').html());
    }
  });
  label.html(labels.join(', '));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="row">
            <div class="col-md-12">
                <div id="format" >
                    <div class="col-md-1 col-centered celleSettimana">
                        <input type="checkbox" id="checkLunedi" class="lunedi1 giornoSettimana" value="lunedi">
                        <label for="checkLunedi" class="cella">LUNEDI</label>
                    </div>
                    <div class="col-md-1 col-centered celleSettimana">
                        <input type="checkbox" id="ceckMartedi" class="giornoSettimana" value="martedi">
                        <label for="ceckMartedi" class="cella">MARTEDI</label>
                    </div>
                    <div class="col-md-1 col-centered celleSettimana">
                        <input type="checkbox" id="checkMercoledi" class="giornoSettimana"value="mercoledi">
                        <label for="checkMercoledi" class="cella">MERCOLEDI</label>
                    </div>

                    <div class="col-md-1 col-centered celleSettimana">
                        <input type="checkbox" id="checkGiovedi" class="giornoSettimana"value="giovedi">
                        <label for="checkGiovedi" class="cella">GIOVEDI</label>
                    </div>

                    <div class="col-md-1 col-centered celleSettimana">
                        <input type="checkbox" id="checkVenerdi" class="giornoSettimana" value="venerdi">
                        <label for="checkVenerdi" class="cella">VENERDI</label>
                    </div>

                    <div class="col-md-1 col-centered celleSettimana">
                        <input type="checkbox" id="checkSabato" class="giornoSettimana" value="sabato">
                        <label for="checkSabato" class="cella">SABATO</label>
                    </div>

                    <div class="col-md-1 col-centered celleSettimana">
                        <input type="checkbox" id="checkDomenica" class="giornoSettimana" value="domenica">
                        <label for="checkDomenica" class="cella">DOMENICA</label>
                    </div>
                </div>
            </div>
  <p id="daysSelected"></p>
    </div>

Answer 2

尝试使用此示例代码来测试是否选中了复选框：

＆＃13;

$(document).ready(function() {
  $('#test').click(function() {
    alert($('#check').prop('checked'));
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="check">
<input type="button" id="test" value="Is that checked?">

＆＃13;

注意：此代码使用jQuery，因此请确保将其包含在HTML文件中。

Answer 3

我可能会迟到但是试着检查一下 Fiddle

var $inputCheckBoxes = $('input[type="checkbox"]');
$inputCheckBoxes.on("change", function(){
    $("#checked-inputs-container > span").remove();
    $.each($inputCheckBoxes, function(index, element) {
        var isChecked = $(element).prop("checked");
        if (isChecked) {
            $("#checked-inputs-container").append('<span>' + $(element).val() + '</span>');
        }
    });
});

Answer 4

试试这个。完整代码如果您希望在单击任何按钮后显示列表。

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $("button").click(function(){
            var favorite = [];
            $.each($("input[name='day']:checked"), function(){            
                favorite.push($(this).val());
            });
            favorite = favorite.join(", ");
            $('#result').html("Selected value are:"+favorite);
            //alert("My favourite days are: " + favorite.join(", "));
        });
    });
</script>
</head>
<body>
    <div class="row">
    <div class="col-md-12">
        <div id="format">
            <div class="col-md-1 col-centered celleSettimana">
                <input type="checkbox" name="day" class="lunedi1 giornoSettimana" value="lunedi">
                <label for="checkLunedi" class="cella">LUNEDI</label>
            </div>
            <div class="col-md-1 col-centered celleSettimana">
                <input type="checkbox" name="day" class="giornoSettimana" value="martedi">
                <label for="ceckMartedi" class="cella">MARTEDI</label>
            </div>
            <div class="col-md-1 col-centered celleSettimana">
                <input type="checkbox" name="day" class="giornoSettimana" value="mercoledi">
                <label for="checkMercoledi" class="cella">MERCOLEDI</label>
            </div>

            <div class="col-md-1 col-centered celleSettimana">
                <input type="checkbox" name="day" class="giornoSettimana" value="giovedi">
                <label for="checkGiovedi" class="cella">GIOVEDI</label>
            </div>

            <div class="col-md-1 col-centered celleSettimana">
                <input type="checkbox" name="day" class="giornoSettimana" value="venerdi">
                <label for="checkVenerdi" class="cella">VENERDI</label>
            </div>

            <div class="col-md-1 col-centered celleSettimana">
                <input type="checkbox" name="day" class="giornoSettimana" value="sabato">
                <label for="checkSabato" class="cella">SABATO</label>
            </div>

            <div class="col-md-1 col-centered celleSettimana">
                <input type="checkbox" name="day" class="giornoSettimana" value="domenica">
                <label for="checkDomenica" class="cella">DOMENICA</label>
            </div>

             <button type="button">Get Values</button>

             <p id="result"></p>
        </div>
    </div>
</div>

使用jquery

4 个答案: