How to get Selected Checkbox value by ID-CodePudding

Currently my code works well with the input name, I can get the input value by input name But I want my script to retrieve the input value with id input and not with name input?

here my code :

$(document).ready(function () {
    $('input[type="checkbox"]').click(function () {
        getSelectedCheckBoxwithValueText("test")               
    });
    var getSelectedCheckBoxwithValueText = function (name1) {
        var data = $('input[name="'   name1   '"]:checked');
        if (data.length > 0) {
            var resultdata='' ;
            data.each(function () {
                var selectedValue = $(this).val();
                 resultdata  = $('label[for="cb-'   selectedValue   '"]').text()   "<br/>";

            });
            $("#divchecked").html(resultdata);
        }
        else {
            $("#divchecked").html("No Check box selected");
        }
        

    };
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<body>
    checked:
    <input type="checkbox" id="c1" name="test" value="cricket" />
    <label for="cb-cricket">Cricket</label>
    <input type="checkbox" id="c2" name="test" value="swimming" />
    <label for="cb-swimming">Swimming</label>
    <input type="checkbox" id="c3" name="test" value="blog" />
    <label for="cb-blog">Blog</label>
    <input type="checkbox" id="c4" name="test" value="coding" />
    <label for="cb-coding">Coding</label>
    <br/>
    <br/>
    Selected checkbox:<br />
    <div id="divchecked"></div>
</body>

jsfiddle: https://jsfiddle.net/showcode/L64nauo0/5/

CodePudding user response：

You can use

var data = $('input[id=^"c"]:checked');

Only if the IDs not pseudos (so you really this IDs use), and do not use IDs thagt starts with c
This is a little hacker solution, but works!

CodePudding user response：

There is no need to use id or name to select the checkboxes and/or their related labels. You can simplify your code like so

Select all the checkboxes from the DOM and listen to change event on them.
When the value of a checkbox changes, you get all selected checkboxes using .filter().
And then get the text of the related labels using .map() and .get().

$(document).ready(function () {
    let $checkboxes = $('input[type="checkbox"]');

    $checkboxes.change(function () {
        let labels = $checkboxes.filter(':checked').map(function(){
            return $(this).next('label').text().trim();
        }).get();

        $("#divchecked").html(labels.join('<br />') || "No Check box selected");
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
checked:
<input type="checkbox" id="c1" name="test" value="cricket" />
<label for="c1">Cricket</label>
<input type="checkbox" id="c2" name="test" value="swimming" />
<label for="c2">Swimming</label>
<input type="checkbox" id="c3" name="test" value="blog" />
<label for="c3">Blog</label>
<input type="checkbox" id="c4" name="test" value="coding" />
<label for="c4">Coding</label>
<br/>
<br/>

Selected checkbox:<br />
<div id="divchecked"></div>