Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Using jQuery, how to locate an element when the Name and Value are known

Thanks for reading this

I thought I could use find(), but couldn't make it work. I know I can add IDs or classnames, but would like to know how with the current markup.

Thanks

Here is the HTML

<input name="keywordCheckbox" type="checkbox" value="S" />
<input name="keywordCheckbox" type="checkbox" value="C" />
<input name="keywordCheckbox" type="checkbox" value="A" />

and the js

<script language="Javascript" src="javascript/jquery-1.2.6.min.js"></script>
<script type="text/JavaScript">

 $(function(){
  $('[name="keywordCheckbox"]').bind("click",
   function() {
    if($(this).attr("checked") == true) {
     switch(this.value) {
      case "A":
       var $_this = $(this) ;
       $('[name="keywordCheckbox"]').each(function() {
        if($(this).val() != $($_this).val()) { $(this).attr("checked",false); }
       });
       break ;
      default:
 DOESN'T WORK --> $('[name="keywordCheckbox"]').find('[value="A"]').attr("checked", false);}
      } // END Switch
    } // END If
  }); // End BIND
 }); // End eventlistener
 </script>
like image 207
Jay Corbett Avatar asked Dec 06 '08 17:12

Jay Corbett


People also ask

How can I select an element by name with jQuery?

How to select an element by name with jQuery? The JavaScript getElementsByName() method can be used to select the required element and this can be passed to a jQuery function to use it further as a jQuery object.

How do you find the element based on a data attribute value?

Answer: Use the CSS Attribute Selector You can use the CSS attribute selectors to find an HTML element based on its data-attribute value using jQuery. The attribute selectors provide a very powerful way to select elements.

How do you find the value of an element with a name instead of ID?

Just type the name of the element without "<" and ">" characters. For example type P, not <P> if the answer is the <P> element.

How do you find something in jQuery?

The find() is an inbuilt method in jQuery which is used to find all the descendant elements of the selected element. It will traverse all the way down to the last leaf of the selected element in the DOM tree. Here selector is the selected elements of which all the descendant elements are going to be found.


2 Answers

You should be able to chain the attribute selectors:

 $('input[name="keywordCheckbox"][value="A"]').attr("checked",false);

Will set checked to false for the input with name keywordCheckbox and value of A.

 $('input[name="keywordCheckbox"][value!="A"]').attr("checked",false);

will set checked to false for the inputs with name keywordCheckbox whose values are not A.

EDIT

I just tested the following in Firefox/Macintosh with the latest jQuery. Works fine. What version of jQuery are you using?

$(document).ready( function() {
    $('input[name=keywordCheckbox]').bind( 'click', function() {
       if (this.checked) {
          if (this.value == 'A') {              
             $('input[name="keywordCheckbox"][value!="A"]')
                .attr("checked",false);
          }
          else {
             $('input[name="keywordCheckbox"][value="A"]')
                .attr("checked",false);
          }
       }
    });
});
like image 190
tvanfosson Avatar answered Sep 25 '22 08:09

tvanfosson


Or you could do:

$("input[name='keywordCheckbox']").filter("input[value='A']")

Then there is no need for an each function.

like image 37
Pim Jager Avatar answered Sep 25 '22 08:09

Pim Jager