Results 1 to 4 of 4

Thread: Get ids of checked checkboxes

  1. #1
    Join Date
    Oct 2012
    Posts
    180
    Thanks
    22
    Thanked 1 Time in 1 Post

    Default Get ids of checked checkboxes

    I figured out how to show them as an alert, but I would like to list them below the checkboxes:

    http://jsfiddle.net/UqrYJ/203/

    Code:
    <input type="checkbox" id="1"> <label>First</label><br>
    <input type="checkbox" id="2"> <label>Second</label><br>
    <input type="checkbox" id="3"> <label>Third</label><br>
    <input type="checkbox" id="4"> <label>Forth</label>
    Code:
    $("input:checkbox").change(function() {
        var someObj = {};
        someObj.showid = [];
        $("input:checkbox").each(function() {
            if ($(this).is(":checked")) {
                someObj.showid.push($(this).attr("id"));
            }
        });
        alert(someObj.showid);
    });
    Last edited by qwikad.com; 09-07-2015 at 01:08 AM.

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,033
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    I would like to list them below the checkboxes
    Not sure what you're trying to do but you can display the content/value of an attribute with CSS.

    Something like;

    Code:
    input[type='checkbox']:before { content:attr(id); display:block; margin-top:10em }
    Or

    Code:
    input[type='checkbox']:checked:before { content:attr(id); display:block; margin-top:10em }
    Last edited by Beverleyh; 09-06-2015 at 07:14 AM.
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  3. #3
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,881
    Thanks
    49
    Thanked 266 Times in 258 Posts
    Blog Entries
    56

    Default

    Something like this:
    Code:
    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
    
    <input type="checkbox" id="1" onclick="$('#checked1').empty(); if(this.checked==true){$('#checked1').append('Checked: '+this.id+'<br>')}">First<br>
    <input type="checkbox" id="2" onclick="$('#checked2').empty(); if(this.checked==true){$('#checked2').append('Checked: '+this.id+'<br>')}">Second<br>
    <input type="checkbox" id="3" onclick="$('#checked3').empty(); if(this.checked==true){$('#checked3').append('Checked: '+this.id+'<br>')}">Third<br>
    <input type="checkbox" id="4" onclick="$('#checked4').empty(); if(this.checked==true){$('#checked4').append('Checked: '+this.id+'<br>')}">Fourth<br>
    <div id="checked1"></div>
    <div id="checked2"></div>
    <div id="checked3"></div>
    <div id="checked4"></div>
    Bla bla
    (This does not require the jquery function of your first post).
    Last edited by molendijk; 09-07-2015 at 12:47 AM.

  4. #4
    Join Date
    Oct 2012
    Posts
    180
    Thanks
    22
    Thanked 1 Time in 1 Post

    Default

    Quote Originally Posted by molendijk View Post
    Something like this:
    Code:
    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
    
    <input type="checkbox" id="1" onclick="$('#checked1').empty(); if(this.checked==true){$('#checked1').append('Checked: '+this.id+'<br>')}">First<br>
    <input type="checkbox" id="2" onclick="$('#checked2').empty(); if(this.checked==true){$('#checked2').append('Checked: '+this.id+'<br>')}">Second<br>
    <input type="checkbox" id="3" onclick="$('#checked3').empty(); if(this.checked==true){$('#checked3').append('Checked: '+this.id+'<br>')}">Third<br>
    <input type="checkbox" id="4" onclick="$('#checked4').empty(); if(this.checked==true){$('#checked4').append('Checked: '+this.id+'<br>')}">Fourth<br>
    <div id="checked1"></div>
    <div id="checked2"></div>
    <div id="checked3"></div>
    <div id="checked4"></div>
    Bla bla
    (This does not require the jquery function of your first post).
    That's what I was looking for!

Similar Threads

  1. Resolved Uncheck a checkbox if another is checked (3 checkboxes)
    By qwikad.com in forum JavaScript
    Replies: 8
    Last Post: 04-24-2014, 08:07 PM
  2. If Else Input checked?
    By mikster in forum PHP
    Replies: 4
    Last Post: 08-31-2011, 02:44 AM
  3. Resolved disable other checkboxes if 3 checkboxes are checked
    By al3bed in forum JavaScript
    Replies: 1
    Last Post: 08-28-2009, 04:41 PM
  4. record (unknown num) checked checkboxes values in php/mysql, how ?
    By leonidassavvides in forum MySQL and other databases
    Replies: 0
    Last Post: 08-28-2008, 11:01 AM
  5. Disable checkboxes based in other checkboxes.
    By gastongr in forum JavaScript
    Replies: 11
    Last Post: 04-24-2006, 11:42 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •