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>
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.
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.
Just type the name of the element without "<" and ">" characters. For example type P, not <P> if the answer is the <P> element.
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.
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);
}
}
});
});
Or you could do:
$("input[name='keywordCheckbox']").filter("input[value='A']")
Then there is no need for an each function.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With