javascript/jquery get value of newly checked checkbox

Question

the following is my code

<input type="checkbox" id="checkbox" value="brand.php?brand=bmw" name="bmw" <?php echo $checked; ?> > BMW</li>
<input type="checkbox" id="checkbox" value="brand.php?brand=toyota" name="toyota"> Toyota</li>
<input type="checkbox" id="checkbox" value="brand.php?brand=farari" name="farari" checked > Farari</li>
<input type="checkbox" id="checkbox" value="brand.php?brand=nissan" name="nissan" checked > Nissan</li>

my javascript/jquery script is

<script>
$(document).ready(function() {
    var ckbox = $('#checkbox');
    var url = '';
    console.log(url);

    $('input').on('click', function() {

        if(ckbox.is(':checked')) {
            var url = $(':checked').val();
            console.log(url);
            window.location = url;
        }
    });
});

I want the page to go to the newly checked checkbox.How to make that happen?

Answer 1

  $(document).ready(function() { var ckbox = $('.clscheckboxes'); var url = ''; $('input[type=checkbox]').change(function() { if ($(this).is(':checked')) { var url = $(this).val(); console.log(url); alert(url); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="checkbox" id="checkbox1" class="clscheckboxes" value="brand.php?brand=bmw" name="bmw" <?php echo $checked; ?> > BMW</li> <input type="checkbox" id="checkbox2" class="clscheckboxes" value="brand.php?brand=toyota" name="toyota"> Toyota</li> <input type="checkbox" id="checkbox3" class="clscheckboxes" value="brand.php?brand=farari" name="farari" checked > Farari</li> <input type="checkbox" id="checkbox4" class="clscheckboxes" value="brand.php?brand=nissan" name="nissan" checked > Nissan</li> 

Answer 2

id should be a unique value in the whole document. Change your HTML to have unique id's for each checkbox and modify your jQuery selector based on class or input type.

Check below example.

 $(document).ready(function() { $('.chkbox').on('change', function() { if ($(this).is(':checked')) { var url = $(this).val(); console.log(url); window.location = url; } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="checkbox" id="checkbox1" class="chkbox" value="brand.php?brand=bmw" name="bmw"> BMW</li> <input type="checkbox" id="checkbox2" class="chkbox" value="brand.php?brand=toyota" name="toyota"> Toyota</li> <input type="checkbox" id="checkbox3" class="chkbox" value="brand.php?brand=farari" name="farari" checked> Farari</li> <input type="checkbox" id="checkbox4" class="chkbox" value="brand.php?brand=nissan" name="nissan" checked> Nissan</li> 

Answer 3

One more sample code. Hope it'll work.

JQuery Code

$( ".checkbox" ).click(function() {
    if ($(this).is(":checked"))
    {
        var page_url = $(this).val();
        window.location = page_url;
    }
});

HTML

<input type="checkbox" class="checkbox" value="brand.php?brand=bmw" name="bmw"> BMW</li>
<input type="checkbox" class="checkbox" value="brand.php?brand=toyota" name="toyota"> Toyota</li>
<input type="checkbox" class="checkbox" value="brand.php?brand=farari" name="farari"> Farari</li>
<input type="checkbox" class="checkbox" value="brand.php?brand=nissan" name="nissan"> Nissan</li>