CODEWITHSUNDEEP
javascriptjqueryhtml
Daniel Nill
Daniel Nill

Reputation: 5747

How to set link to check checkbox with variable name,id,value

I have a long list of checkboxes each with a link next to it. Something like:

<form name="checkboxlist" action="..." >
    <input type="checkbox" id="1" name="pageCB" value="1"/>
    <a id="1" href="#" onclick="sub(id)>click here</a>
    <input type="checkbox" id="2" name="pageCB" value="2"/>
    <a id="2" href="#" onclick="sub(id)>click here</a>
    ...
    ...
    <input type="submit" />
</form>

I am currently trying to use:

<script>
    function sub(id){
        $("input:checkbox[value=id]").attr("checked", true);
        document.checkboxlist.submit(); 
    }
</script>

But this obviously does not read the variable id and I would really like to avoid making if statements for each id as there are several hundred of them. Is there some way to do this?

Upvotes: 0

Views: 4324

Answers (3)

Rob Cowie
Rob Cowie

Reputation: 22619

If I understand correctly, you want to support selecting checkboxes by clicking on an associated element, and to submit the form on click. I would suggest a) Use a <label> element in place of <a> as they can be associated with inputs by id and b) don't use numeric, duplicate id attributes.

<form name="checkboxlist" action="#">
    <input type="checkbox" id="a" name="pageCB" value="1"/>
    <label for="a">Click here</label>
    <input type="checkbox" id="b" name="pageCB" value="2"/>
    <label for="b">Click here</label>
</form>    

<script>
    $(document).ready(function() {
        $('input:checkbox').change(function(){
            $(this).parent('form').submit();
        });
    });
</script>

Upvotes: 0

user113716
user113716

Reputation: 322502

EDIT: I see you're also using duplicate IDs. This is invalid, and things will not work properly when selecting by ID.

Numeric IDs are invalid in HTML4.

Anyway, change this:

$("input:checkbox[value=id]")

to this:

$("input:checkbox[value='" + id + "']")

This concatenates the value of id into the selector string, and I also added quotation marks around the attribute selector value since they're required by the docs.

And change your inline handlers to this:

<a id="2" href="#" onclick="sub(this.id)>click here</a>

...because this is a reference to the element clicked, so this.id is a reference to its ID attribute.

Upvotes: 3

Seth
Seth

Reputation: 6260

You shouldn't use a link you should use a <label> tag.

That's what it's made for.

<input type="checkbox" name="mybox" id="mybox">
<label for="mybox">Click this box</label>

This works for all form fields and is way better than having to build JS to do something that already exists.

Upvotes: 5

Related Questions