javascript - Check if Checkbox is checked based on name - Stack Overflow

admin管理员组

文章数量:1305112

This is my code and it always returns "nothing is checked" no matter if something is checked or not.

function rstSelfs() {
var chkds = document.getElementsByName('selfs');
if(chkds.checked)  {
alert ("something is checked"); }
 else {
alert("nothing is checked");
}}

I have been using the above as a test to see if I can get the code to work properly. I have multiple checkboxes with the name "selfs" and I want the dropdown selection only to reset if none of the boxes with the name "selfs" are not checked. I would assume the code would look like this but nor this or the code above works... Please help.. I new to this and I have attempted to search and it is possible this has been answered but I apologize it did not name sent to me.

What I want the code to do is this:

function rstSelfs() {
var chkds = document.getElementsByName('selfs');
if(chkds.checked)  {
return false;  }
 else {
($('.CssSel').get(0).selectedIndex = 0) }
}



<form id="Service">
   <input type="checkbox" name="site" id="cktm" onclick="isTsite()">

    <input type="checkbox" name="selfs" id="ckselfc" onclick="isTsserv();isTextServC()">
    <label for="checkbox">Self-Serve Classic</label><br>
    <input type="checkbox" name="selfs" id="ckselfn" onclick="isTsserv();isTextServN()">
    <label for="checkbox">Self-Serve Next-Gen</label><br>
    <input type="checkbox" name="homeSer" id="ckhomes" onclick="isThs()">
    <label for="checkbox">Home Services</label><br>
    <input type="checkbox" name="mapp" id="ckmobilea" onclick="isTmApp()">
    <label for="checkbox">Mobile App</label><br>
    <input type="checkbox" name="checkbox" id="ckgem" onclick="isTextGem()">
    <label for="checkbox">Gemini</label><br>
</form>

<form id="Service2">
    <input type="checkbox" name="site" id="ckkm" onclick="isKsite()">
    <label for="checkbox">mobile</label><br>
    <input type="checkbox" name="selfs" id="ckKselfc" onClick="isKsserv();isKServC()">
    <label for="checkbox">M Self-Serve Classic</label><br>
    <input type="checkbox" name="selfs" id="ckKselfn" onClick="isKsserv();isKServN()">
    <label for="checkbox">M Self-Serve Next-Gen</label><br>
    <input type="checkbox" name="mapp" id="ckKmobilea" onclick="isKmApp()">
    <label for="checkbox">M Mobile App</label><br>
</form>

The checkboxes with name "selfs" control the hide and show for the div = selfserve. And I need to reset the drop down selection only if none of the "selfs" are chcked . I have actually have 5 checkboxes that have the name selfs. The code is rather large thats why the other 3 are missing.

The HTML dropdown code is:

<div id="selfserve" style="display:none">
<select class="CssSel" style="width:175px" onChange="ssPicker()">
<option value="1" selected  style="color:red;" ssSel="**Self-Serve Issue**">Select Self-Serve        
Issue</option>
<option value="2" ssSel="Entire Site Down">Entire Site Down</option>
<option value="3" ssSel="Login Issues">Login Issues</option>
<option value="4" ssSel="Usage Meter Issue">Usage Meter Issue</option>
<option value="5" ssSel="Change feature Issues">Change feature Issues</option>
<option value="6" ssSel="Page Loading Issues">Page Loading Issues</option>
<option value="7" ssSel="Extreme Latency">Extreme Latency</option>
<option value="8" ssSel="Navigation Issues">Navigation Issues</option> 
</select>


</div>
 <input type="button" name="reset_self" value="Reset" onClick="rstSelfs()">

This is my code and it always returns "nothing is checked" no matter if something is checked or not.

function rstSelfs() {
var chkds = document.getElementsByName('selfs');
if(chkds.checked)  {
alert ("something is checked"); }
 else {
alert("nothing is checked");
}}

I have been using the above as a test to see if I can get the code to work properly. I have multiple checkboxes with the name "selfs" and I want the dropdown selection only to reset if none of the boxes with the name "selfs" are not checked. I would assume the code would look like this but nor this or the code above works... Please help.. I new to this and I have attempted to search and it is possible this has been answered but I apologize it did not name sent to me.

What I want the code to do is this:

function rstSelfs() {
var chkds = document.getElementsByName('selfs');
if(chkds.checked)  {
return false;  }
 else {
($('.CssSel').get(0).selectedIndex = 0) }
}



<form id="Service">
   <input type="checkbox" name="site" id="cktm" onclick="isTsite()">

    <input type="checkbox" name="selfs" id="ckselfc" onclick="isTsserv();isTextServC()">
    <label for="checkbox">Self-Serve Classic</label><br>
    <input type="checkbox" name="selfs" id="ckselfn" onclick="isTsserv();isTextServN()">
    <label for="checkbox">Self-Serve Next-Gen</label><br>
    <input type="checkbox" name="homeSer" id="ckhomes" onclick="isThs()">
    <label for="checkbox">Home Services</label><br>
    <input type="checkbox" name="mapp" id="ckmobilea" onclick="isTmApp()">
    <label for="checkbox">Mobile App</label><br>
    <input type="checkbox" name="checkbox" id="ckgem" onclick="isTextGem()">
    <label for="checkbox">Gemini</label><br>
</form>

<form id="Service2">
    <input type="checkbox" name="site" id="ckkm" onclick="isKsite()">
    <label for="checkbox">mobile.</label><br>
    <input type="checkbox" name="selfs" id="ckKselfc" onClick="isKsserv();isKServC()">
    <label for="checkbox">M Self-Serve Classic</label><br>
    <input type="checkbox" name="selfs" id="ckKselfn" onClick="isKsserv();isKServN()">
    <label for="checkbox">M Self-Serve Next-Gen</label><br>
    <input type="checkbox" name="mapp" id="ckKmobilea" onclick="isKmApp()">
    <label for="checkbox">M Mobile App</label><br>
</form>

The checkboxes with name "selfs" control the hide and show for the div = selfserve. And I need to reset the drop down selection only if none of the "selfs" are chcked . I have actually have 5 checkboxes that have the name selfs. The code is rather large thats why the other 3 are missing.

The HTML dropdown code is:

<div id="selfserve" style="display:none">
<select class="CssSel" style="width:175px" onChange="ssPicker()">
<option value="1" selected  style="color:red;" ssSel="**Self-Serve Issue**">Select Self-Serve        
Issue</option>
<option value="2" ssSel="Entire Site Down">Entire Site Down</option>
<option value="3" ssSel="Login Issues">Login Issues</option>
<option value="4" ssSel="Usage Meter Issue">Usage Meter Issue</option>
<option value="5" ssSel="Change feature Issues">Change feature Issues</option>
<option value="6" ssSel="Page Loading Issues">Page Loading Issues</option>
<option value="7" ssSel="Extreme Latency">Extreme Latency</option>
<option value="8" ssSel="Navigation Issues">Navigation Issues</option> 
</select>


</div>
 <input type="button" name="reset_self" value="Reset" onClick="rstSelfs()">

• javascript
• jquery
• checkbox
• drop-down-menu
• selectedvalue

Share Improve this question Follow edited Nov 28, 2014 at 20:39 user3837156 asked Nov 28, 2014 at 20:31 user3837156user3837156 3711 gold badge11 silver badge55 bronze badges 3

• Am guessing you are test this with the reset button? – Edward Manda Commented Nov 28, 2014 at 21:01
• yes i am... I actually have a function that will call on this reset function once it works but yes for now I have assigned it to a temp reset button to test. – user3837156 Commented Nov 28, 2014 at 21:28
• Try giving them a class name and then use document.getElementsByTagName(".classname"). Because the returned value by the methods you used returns an object and you have to parse that object to really get the checked value whether clicked or not. – Edward Manda Commented Nov 28, 2014 at 21:46

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

Not working:

Since you use jQuery, you can check if any checkboxes are not checked:

function rstSelfs() {
    var chkds = $("input[name='selfs']:checkbox");

    if (chks.not(":checked").length > 0)  {
        return false;  
    } else {
        ($('.CssSel').get(0).selectedIndex = 0) 
    }
}

this worked but I had to rework it a bit! thank you!

Tweaked, working:

function rstSelfs() {
var chkds = $("input[name='selfs']:checkbox");

if (chkds.is(":checked"))  {
    return false;  
} else {
    ($('.CssSel').get(0).selectedIndex = 0) 
}
}

getElementsByName() function returns an array of elements, not single element, so it doesn't have property checked. If there is only one element by this name you should use something like this:

document.getElementsByName("selfs")[0].checked

Or to correct your function:

function rstSelfs() {
   var chkds = document.getElementsByName('selfs')[0];
   if(chkds.checked)  {
       alert ("something is checked"); }
   else {
       alert("nothing is checked");
}}

Since you have more than one checkbox with same name , you will get array when you do document.getElementsByName('selfs') . Try looping through the resulting array to see if any of that is checked.

Something like this :-

var isChecked=false ;

 for (i=0; i<document.Service.selfs.length;i++) {
if(document.Service.selfs[i].checked)

isChecked=true ;

}

 if(isChecked)  ($('.CssSel').get(0).selectedIndex = 0) 

本文标签： javascriptCheck if Checkbox is checked based on nameStack Overflow