Question

I have a button I’m using to toggle between displaying yes/no ‘in-policy’ divs

<form>
<input type="radio" id="Policy0" name="Policy" value="0" onclick="filterHotel();"><label for="Policy0">All</label>
</form>
<script type="application/javascript">
var Policy = $('input:radio[name=Policy]:checked').val()
if (Policy == 0) {  
 $('form [data-policy="0"]').toggle();              
}
</script>

<div id="24448" data-policy="0">Data here</div>
<div id="24448" data-policy="1">Data here</div>

With the code above I can successfully show/hide the correct div, but my issue is I don’t want to wrap my input in a form element. Is there a way to reference based on a value in an attribute?

I’ve tried $('input[attr=data-policy][value="0"]').toggle(); but that doesn’t seem to work. I’m sure I’m missing something simple, can someone point me in the right direction?

EDIT: $('input[data-policy="0"]').toggle(); does not work, i don’t get an error, but it doesn’t hide a div with an attribute of data=policy="0" I also tried data-policy=0 with no luck

Answer 1

This should suffice:

$('[data-policy="0"]').toggle(); 

For further info, you can take a look at Attribute Equals Selector [name=”value”] documentation